JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

CSS

div
{
    width: 400px;
    height: 250px;
    background-color:blueviolet;
}

ul
{
    list-style:none;
}

li
{
    background-color:red;
    width: 100px;
    display: inline;
}

JavaScript

$('.images img').on({
    mouseenter: function(){
        $(this).animate({width: '170px', height: '120px', top: '-=15px', left: '-=15px'}, 1000);
    },
    mouseleave: function(){
        $(this).animate({width: '150px', height: '100px', top: '+=15px', left: '+=15px'}, 500);
    }
});