JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imageframe">
    <div class="imagecontainer">
        <img class="clipartimage" src="http://www.opendorleans.com/media/partenaires_logos/Logo_BMW.png" />
    </div>
    <div class="imagecontainer">
        <img class="clipartimage" src="http://www.opendorleans.com/media/partenaires_logos/Logo_BMW.png" />
    </div>
    <div class="imagecontainer">
        <img class="clipartimage" src="http://www.opendorleans.com/media/partenaires_logos/Logo_BMW.png" />
    </div>
</div>

CSS

body {
    background: #e5e5e5;
}

.imageframe {
    margin: 50px auto;
    width: 400px;
}

.imagecontainer{
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    padding: 10px;
}

.clipartimage {
    position: absolute;
    width: 50px;
    padding: 10px;
    z-index: 1;
}

JavaScript

var $target;
var targetWidth;
var targetHeight;
var targetPos;
var isAnimated;
$(".imagecontainer").hover(function(){
    $target = $('.clipartimage', this);
    if(!isAnimated){        
        targetPos = $target.position();
        targetWidth = $target.width();
        targetHeight = $target.height();
        isAnimated = true;
    }
    $target.stop().animate({'height':'100px', 'width':'100px', 'left': '-=' + (targetWidth / 2), 'top': '-=' + (targetHeight / 2) }, 200).css({
        'background': '#fff',
        'border':'solid 1px #000',
        'border-radius': '5px',
        'box-shadow': '0px 6px 10px rgba(0,0,0,.8)',
        'z-index': '2'
    });
}, function(){
    $target.stop().animate({'height':targetWidth, 'width':targetHeight, 'left': targetPos.left, 'top': targetPos.top }, 200, function(){ isAnimated = false; }).css({
        'background': 'transparent',
        'border':'solid 0px #000',
        'border-radius': '0px',
        'box-shadow': '0px 0px 0px rgba(0,0,0,.8)',
        'z-index': '1'
    });
});