JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<div id="grid" class="am-wrapper">
    <div class="gridItem"><img src="http://placekitten.com/g/100/100"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/100/101"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/105/106"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/101/106"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/100/102"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/101/102"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/102/102"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/100/103"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/101/103"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/102/103"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/103/103"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/100/104"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/101/104"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/102/104"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/103/104"></div>
    <div class="gridItem"><img src="http://placekitten.com/g/104/104"></div>
</div>

CSS

#grid {
   margin: 50px;
   width: 400px;
   height: 400px; 
   border: 2px solid black;    
}

.gridItem {
   //outline: 1px solid black;
   float: left;
   width: 100px;
   height: 100px;   
   line-height: 100px;
   text-align: center;
   overflow:hidden;    
}

img {
   width: 100px;   
}

JavaScript

$('.am-wrapper img').each(function() {
    $(this).clone().appendTo('body').css({
        'position': 'absolute',
        'width': $(this).width() * 1.5 + 'px',
        'height': $(this).height() * 1.5 + 'px',
        'border': '2px solid black'
    }).offset({
        top: $(this).offset().top - $(this).height() * .25,
        left: $(this).offset().left - $(this).width() * .25
    }).hide().addClass('clone');
});

$('.am-wrapper img').on('mouseenter', function() {
    $('.clone').hide().eq($('.am-wrapper img').index($(this))).show();
});