JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div class="imgHolder">
    <img id="h0" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37932.jpg" />
    <img id="h1" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37927.jpg" />
    <img id="h2" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37919.jpg" />
    <img id="h3" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37932.jpg" />
    <img id="h4" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37927.jpg" />
    <img id="h5" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37919.jpg" />
    <img id="h6" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37932.jpg" />
    <img id="h7" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37927.jpg" />
    <img id="h8" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37919.jpg" />
    <img id="h9" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37932.jpg" />
    <img id="h10" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37927.jpg" />
    <img id="h11" class="grow" src="http://betathumbnails.skins.be/holly-willoughby/holly-willoughby-37919.jpg" />
</div>

CSS

body {
    padding: 50px;           
}
.imgHolder {
    text-align: center;
    border: 1px solid #000;
    background-color: #eee;
    width: 100px;    
}
img {
    padding: 2px;
    width: 33px;            
}

JavaScript

$(document).on("mouseover", "img.grow", function() {
    var iid = $(this).attr("id");
    var isr = $(this).attr("src");
    var loc = $(this).offset();
    $("img.grown").fadeOut(100, function() {
        $(this).remove(); 
    });
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />');
    $(".grown").animate({
        width: '100px', 
        marginLeft: '-25',
        marginTop: '-15'
    }, 250);
}).on("mouseleave", "img.grown", function() {
    var iid = $(this).attr("id");
    $("img#" + iid).fadeOut(100, function() {
        $(this).remove(); 
    });
});