JSFiddle - React, Tailwind, and code Playground
HTML
<img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg">
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg">
<img id="fullsized">
CSS
.thumbnail {
width: 5em;
height: 5em;
}
#fullsized {
width: 10em;
height: 10em;
border: 2px solid red;
}
JavaScript
$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
return this.fadeOut(speedOut, function() {
$(this).attr('src', src).fadeIn(speedIn, callback);
});
};
$(".thumbnail").mouseover(function () {
var newsrc = $(this).attr("src");
$("#fullsized").fadeToSrc(newsrc, 1000, 1000);
});