JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fadehover">
<a href=""><img src="http://www.kaimeramedia.com/derek/Website/portfolio_a.png" alt="" class="a" />
<img src="http://www.kaimeramedia.com/derek/Website/portfolio_b.png" alt="" class="b" /></a>
</div>
CSS
div.fadehover {
position: relative;
}
img.b {
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0);
}
img.a {
position: absolute;
left: 0;
top: 0;
}
JavaScript
$(document).ready(function()
{
$("img.b").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
});
});