title: HTML Image not displaying correctly in Chrome, but is displaying correctly in Safari and Firefox
body: <pre><code>&lt;div style="position: relative; left: 0px; top: 0px;"&gt; 
  
  &lt;img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/&gt;
  
  &lt;img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/&gt;
  
  &lt;div&gt; 
  </code></pre>
  
  <p>And Here is my CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>The image is in the bottom left corner when it should be displaying on top of the first image. This is for the purpose of a on hover fade transition. On Safari and on Firefox, everything is working properly but it does not display correctly on chrome.</p>