JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<table border = '2'>
    <tr><td>f

<img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
        </td>
        <td>
<img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
            </td>
        </tr>
        </table>

CSS

img{
    padding:0;
    margin:5px;
    border:0;
    float:left;
    position:absolute;
}
#a1, #a2 {top:100px;}
#a1{left:60px;}
#a2{left:120px;}

JavaScript

$(function(){
       $('img').hover(
       function(){
           
           $(this).css('z-index','10').stop().animate({
               marginTop: '-20px', 
               marginLeft: '-20px', 
               width: '100px', 
               height: '100px',
           }, 500); 
       },
       function() {
           $(this).stop().animate({
               marginTop: '5px', 
               marginLeft: '5px',
               width: '50px', 
               height: '50px', 
           }, 400).css('z-index','0');
      });
 });