JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="me">
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/511065/458376.jpg" id="img_ini">
    </div>
        
         <div class="me">
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/511065/458376.jpg" id="img_ini">
    </div>
             
              <div class="me">
<img src="http://cdn.ebaumsworld.com/mediaFiles/picture/511065/458376.jpg" id="img_ini">
    </div>

CSS

div {
    position:relative;
}
#img_ini {
    float:left;
    height:300px;
    width:400px;
    position:relative;
    cursor:pointer;
    display:table;
}
.over {
    background:red;
    width:200px;
    height:200px;
    z-index:1000;
}

JavaScript

$('.me').hover(function(){
    var imgH = $("#img_ini").height();
    var imgW = $("#img_ini").width();
    $(this).append("<div class=over></div>");
    $(".over").css({ height : imgH , width : imgW }).animate({ top : 20, left : 20}, "slow");   
},
               function(){
               
               
               }            
              );