JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<ul class="imgGallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul{
    margin: 140px 0 0 140px;
    list-style-type: none;
}
li{
    width: 84px;
    height: 84px;
    border: 1px solid #ccc;
    float: left;
    margin: 2px;
    padding: 0;
    background-color: #efefef;
}
.item_resized{
    width: 170px;
    height: 170px;
    border: 1px solid #ccc; 
    z-index: 2;
    position: relative;
    margin-left: -43px;
    margin-top: -43px;
    background-color: #f0f0f0;
}

JavaScript

$('.imgGallery').find('li').each(function() {   
        $(this).hover(function() {                                              
            /* Add Img-Container */
            $(this).prepend('<div class="item_resized"></div>');
        },function() {
            /* Remove Img-Container */
            $(this).find('.item_resized').remove(); 
        });
    });