Here's what I've been working on:
My HTML code:
<div id="smith">
<img class="top" src="http://i.imgur.com/D6Kohra.png"/>
</div>
And the CSS for it:
#smith {
background: url("http://i.imgur.com/1ABXZ1y.png") no-repeat center;
-webkit-transition: all .5s ease-in-out 0;
-moz-transition: all .5s ease-in-out 0;
-o-transition: all .5s ease-in-out 0;
transition: all .5s ease-in-out 0;
}
#smith img {
position:fixed;
-webkit-transition: all .5s ease-in-out 180s;
-moz-transition: all .5s ease-in-out 180s;
-o-transition: all .5s ease-in-out 180s;
transition: all .5s ease-in-out 180s;
}
#smith img.top {
position:fixed;
display:inline;
left:50%;
}
#smith img.top:hover {
opacity:0;
transition:0;
}
#smith img.bottom:hover {
transition:0;
}
In essence, I'm aiming to initially display the top image and then switch to the bottom image upon hovering. The challenge lies in freezing the bottom image while ensuring that it remains visible even after hovering off.
You can view the project on JsFiddle here: http://jsfiddle.net/mcKempt/gyn8fdt4/
I encountered an issue where the background image remained either constantly visible or hidden even during hover. I attempted separating it into its own image with an opacity of 0, but this approach didn't achieve the desired effect.
If you have alternative methods to accomplish this without setting the transition duration to '180s', please share your insights.
Additionally, I'm interested in discovering more resources related to CSS/HTML techniques.
Thank you!