JSFiddle - React, Tailwind, and code Playground
by Amitabha Ghosh
HTML
<div id="image">
<img src="http://i1055.photobucket.com/albums/s507/amitabha197/women1.png" id="image_color" width="207" height="240" style=" float:left; margin-right:10px;" />
<img src="http://i1055.photobucket.com/albums/s507/amitabha197/women1st.png" id="image_bw" width="207" height="240" style=" float:left; margin-right:10px;" />
</div>
CSS
#image_bw {
display: none;
position: absolute;
left: 0px;
top: 0px;
}
#image {
position: relative;
}
JavaScript
$(document).ready(function(){
$("#image").hover(function(){
$("#image_bw").fadeIn(500);
}, function(){
$("#image_bw").fadeOut(500);
});
});