JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div class="cell"><image src="http://placekitten.com/100/100" /></div>
<div class="cell"><image src="http://placekitten.com/150/100" /></div>
<div class="cell"><image src="http://placekitten.com/100/150" /></div>

CSS

div.cell {
    float: left;
    clear: both;
}

JavaScript

$('.cell').hover(function() {
    var $img = $(this).css({
        'z-index': '10'
    }).find('img').addClass("hover").stop(),
        origSize = $img.data('orig-size'),
        size = origSize || {height: $img.height(), width: $img.width()};
    
    if (!origSize) $img.data('orig-size', size);
    
    $img.animate({
        marginTop: '-10px',
        marginLeft: '-10px',
        width: size.width*1.2,
        height: size.height*1.2
    }, 200);
}, function() {
    var $img = $(this).css({
        'z-index': '0'
    }).find('img').removeClass("hover").stop(),
        
        size = $img.data('orig-size');
    
    $img.animate({
        marginTop: '0',
        marginLeft: '0',
        width: size.width,
        height: size.height
    }, 400)
});