I'm trying to create a hover effect for my social media icons where one icon fades into another when the mouse hovers over it. I came up with this idea:
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. However, the 'background' image (the '...-hover.png' image) isn't showing up. How can I fix this?
Thank you!