JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img class="fadeThis" src="http://placekitten.com/g/100/150" alt="" />

<img class="fadeThis" src="http://placekitten.com/g/100/200" alt="" />

<img class="fadeThis" src="http://placekitten.com/g/300/300" alt="" />

CSS

.fadeWrap {
	position: relative;
    float: left;
    
    margin: 10px;
}

.fadeWrap img { float: left; }

.fadeWrap .fadeSecond {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
    display: none;
}

JavaScript

$(function(){
    
    
    var selector = $('.fadeThis'),
        speed = 400, 
        hoverExtension = 'g';
    
    // Get each img
    selector.each(function() {
    
        // obj points to each individual img
        var obj = $(this);
        
        // Wrap images with .fadeWrap
        obj.wrap('<div class="fadeWrap" />');
        
            // Cache .fadeWrap element
        var objP = obj.parent(),
            // Fetch src from the original image.
            // Also adds the extension from the variable: hoverExtension
            objSrc = obj.attr('src').replace( '.com/' + hoverExtension, '.com');
        
        // Create the second image
        $('<img class="fadeSecond" src="'+ objSrc +'" alt="" />').appendTo( objP );
       
        // Cache second image
        var objNext = obj.next();
        
        // Make second image ready to be animated
        objNext.css({ opacity: 0, display: 'block' });
        
        // Mouseenter and Mouseleave events...
        objP.on("mouseenter mouseleave", function( e ) {
            
            // If event is mouseenter = Use value: 1
            // If event is mouseleave = Use value: 0
            var opacity = e.type === 'mouseenter' ? 1 : 0;
            
            // Animate second image...
            objNext.stop().animate({ opacity: opacity }, speed);
            
        });
    
    });

});