Image Rollover with CSS, fade effect and image preload

rollover_css.css

figure {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    
    img {
        display: block;
        
        &:last-child {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -ms-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s;
        }
    }
    
    &:hover img:last-child {
        opacity: 1;
    }
}

rollover_css.htm

<figure>
    <img src="http://dummyimage.com/254x403/ccc/000.jpg&amp;text=254x403+-+Produkt" alt="" data-hover="http://dummyimage.com/254x403/999/000.jpg&amp;text=254x403+-+Produkt" />
</figure>

rollover_css.js

$('img[data-hover]').each(
    function() {
        var img = $(this);
        
        $('<img />')
            .attr( 'src', img.data('hover') )
            .appendTo( img.parent() );
    }
);