Cross-fading images social media - html

Question

I have these social media icons, when the mouse hovers on one icon its should fade into a other icon. I thought of something like this:
HTML:
<div class="socials">
<img src="../images/fb.png" id="fb1" />
<img src="../images/fb-hover.png" id="fb2" />
<img src="../images/twitter.png" id="twitter1" />
<img src="../images/twitter-hover.png" id="twitter2" />
<img src="../images/insta.png" id="insta1"/>
<img src="../images/insta-hover.png" id="insta2" />
</div>
CSS:
/*This is for letting them stack on each other*/
#fb2, #twitter2, #insta2 {
display:none;
position:absolute;
}
/*Fade animation*/
#fb1:hover, #twitter1:hover, #insta1:hover {
opacity: 0.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}​
Or check this jsfiddle.
The fading out works correctly. But the 'background' image (so the '...-hover.png' image) won't show up. How do I make this work?
Thanks!

Answer 1

If you set display to block on your #fb2, #twitter2, and #insta2, you can see the problem - it's the positioning. In your solution you would need to absolutely position each hover icon under the normal icon. I don't think it can be flexible.
So, I propose a more flexible solution.
Introduce this syntax:
<div class="socials">
<div class="icon">
<img src="http://sillyquark.com/images/fb.png" class="normal" />
<img src="http://sillyquark.com/images/fb-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/twitter.png" class="normal" />
<img src="http://www.sillyquark.com/images/twitter-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/insta.png" class="normal" />
<img src="http://www.sillyquark.com/images/insta-hover.png" class="hover" />
</div>
</div>
Put each icon in a div with a class of of .icon and inside put two images.
Set the .icon div's position to relative to allow absolute positioning relative to the .icon, instead of the body element. Set each icon's top and left to 0px, and add transitions to all images. Also, add width to .icon and img.
.icon{
float: left;
position: relative;
width: 45px;
height: 45px;
padding: 20px;
}
.icon img{
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
opacity: 1.0;
position: absolute;
width: 45px;
top: 0;
left: 0;
}
This is how you switch opacities. In normal conditions, set .icon .normal's opacity to 1.0, and .icon .hover's opacity to 0.0. On hover, do the oposite.
.icon .hover { opacity: 0.0; }
.icon:hover .hover { opacity: 1.0; }
.icon:hover .normal { opacity: 0.0; }
Check out this fiddle for the demo http://jsfiddle.net/uUk6N/3/