Roll Transitions

by vincentieo

HTML

<a href="#"><img class="fadein" src="http://dummyimage.com/180x100/000/fff&text=1" alt="" /></a>
<a href="#"><img class="fadein" src="http://dummyimage.com/180x100/cf5/fff&text=1" alt="" /></a>
<a href="#"><img class="fadein" src="http://dummyimage.com/180x100/f0f/fff&text=1" alt="" /></a>

CSS

/* no  css needed */

JavaScript

$('.fadein').each(function() {
    
    var std = $(this).attr("src");
    var hover = std.replace("text=1", "text=2");
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});