css simple hover fade

Question

Was just wandering if anyone could tell me where I'm going wrong, trying to make one image fade to revealing another image beneath it whilst hovering. However, I cant seem to get the two images to overlap. Any help would be greatly appreciated!

HTML

<div id="content" class="sixteen columns textcenter box">
<p>
       <img class="top" src="img/homepageimg2.jpg" alt="Photography Thumbnail" align="center"> 
       <img class="bottom" src="img/homepageimg22.jpg" alt="Photography Thumbnail" align="center">
</p>
</div>

CSS

#content {
z-index:10;
position:relative;
background-image:url(../img/backgroundindex.jpg);
background-repeat: repeat;  
padding-top: 50px;
padding-bottom:50px;

}
#content img{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#content img.top hover {
opacity:0;
}

Thankyou!

Answer 1

Hover is a psuedo, so if you want the effect to be applied when an img (child of #content) with the class 'top' is hovered over, you'll want to use the form:

#content img.top:hover {
  opacity: 0;
}

Try using absolute positioning on both .top and .bottom (plus top:0, bottom:0, etc.), and relative positioning on their parent container. Make sure .top has a higher z-index than .bottom.

I've set up a complete demo of this effect on CodePen: http://cdpn.io/aAjBb

Demo HTML:

<div class="hover-swap">
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" class="top"/>
  <img src="http://myhswm.org/images/sized/images/animals/tuxedo_kittens-256x256.jpg" class="bottom"/>
</div>

Demo CSS:

.hover-swap {
  position: relative;
  height: 256px;
  width: 256px;
}

.hover-swap .top {
  opacity: 1;
  z-index: 2;
}

.hover-swap .bottom {
  opacity: 1;
  z-index: 1;
}

.hover-swap:hover .top {
  opacity: 0;
}

.hover-swap .bottom, .hover-swap .top {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}