HTML圖像在Chrome中無法正確顯示，但在Safari和Firefox中可正確顯示

Question

<div style="position: relative; left: 0px; top: 0px;"> 

<img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

<img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>

<div> 

這是我的CSS

.container{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background-color: #ffffff;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    padding: 25px;
}

img.imageAAMP{
    width: 800px;
    margin: auto;
    margin-top: auto;
    position: static
}

img.imageAAMP2{
    width: 800px;
    position: absolute;
    margin-left: -800px;
    transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}

img.imageAAMP2:hover{
    opacity: 0;
}

該圖像應顯示在第一張圖像的頂部，位於左下角。 這是為了進行懸停淡入淡出過渡。 在Safari和Firefox上，一切正常，但在chrome上無法正確顯示。

Answer 1

<div style="position: relative; left: 0px; top: 0px;"> 

            <img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

            <img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>
<div>