JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery2"> 
    <h2>jQuery (animated) solution</h2>   
  <a href="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg">  
      <img src="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg" alt="" /></a>         
</div>

CSS

#gallery2 {width:100%; overflow:hidden;}
#gallery2 a {position:relative; float:left; margin:5px;}
#gallery2 a span { background-image:url(http://www.jankoatwarpspeed.com/examples/zoom_icon/zoom.png); background-repeat:no-repeat; width:48px; height:48px; display:none;position:absolute; left:15px; top:15px;}
#gallery2 img { border: solid 1px #999; padding:5px;}
#gallery2 img:hover {opacity:0.6;filter:alpha(opacity=60);}

JavaScript

$(document).ready(function(){ 
        $("#gallery2 a").append("<span></span>"); 
        $("#gallery2 a").hover(function(){  
            $(this).children("span").fadeIn(600); 
        },function(){  
            $(this).children("span").fadeOut(200);   
        });    
    });