JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-container">
<img class='non-hover' src='http://dummyimage.com/200x200/000/fff' />
</div>

<div class="img-container">
<img class='non-hover' src='http://dummyimage.com/200x200/000/fff' />
</div>

<div class="img-container">
<img class='non-hover' src='http://dummyimage.com/200x200/000/fff' />
</div>

<div class="img-container">
<img class='non-hover' src='http://dummyimage.com/200x200/000/fff' />
</div>

CSS

.img-container {
    width:48px; 
    height:48px; 
    overflow: visible;
    float: left;
    margin: 7px;
}

.non-hover{
    max-width: 48px;
    max-height: 48px;
}

.img-hover{
    max-width: 200px;
    max-height: 200px;

    position: relative;
}

JavaScript

$('.non-hover').on('mouseenter', function(){
    $(this).toggleClass('img-hover');
}).on('mouseleave', function(){
    $(this).toggleClass('img-hover')
    });