JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>      
      
        
    </head>
    <body>
    
        
        <div class="box">
            <img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
        </div>
        
        <div class="box2">
            <img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
        </div>
    
    </body>
    
    </html>

CSS

.box, .box2 {
            float:left;
            width:200px;
            height:200px;
            background:blue;
        }

JavaScript

$('.box').mouseenter(function(){
  $(this).stop().animate({ opacity: "0" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ opacity: "1" }, 1000);
});

$('.box2').mouseenter(function(){
  $(this).stop().animate({ opacity: "0" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ opacity: "1" }, 1000);
});;