JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pic"><div class="pic2"></div></div>

CSS

div.pic {
    position: relative;
    width:50px; 
    height: 48px;
    background: url(http://static.jquery.com/ui/images/logo.gif);
    float:right;
    margin:3px 30px 0 0;
}
div.pic2 {
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0;
    background: url(http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif);
}

JavaScript

$.fn.crossfade = function(){
    return this.each(function(){ 
        var $$ = $(this).find('.pic2');
        $$.hover(function(){
            console.log('hover in');
                $$.stop().animate({opacity: 0}, 200);
            }, function(){
            console.log('hover out');
            $$.stop().animate({opacity: 1}, 500);
        }, 0);
    });
}
$("div.pic").crossfade();