JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imageContainer">
    <div class='image red'></div>
    <div class='image blue'></div>
    <div class='image green'></div>
    <div class='image orange'></div>
    <div class='image silver'></div>
    <div class='image yellow'></div>
    <div class='image black'></div>
    <div class='image gold'></div>
    <div class='image brown'></div>
    <div class='image grey'></div>
    <div class='image whitesmoke'></div>
</div>

CSS

div.image {
    border: 1px solid black;
    height: 30px;
    width: 30px;
    margin: 4px;
    display: inline-block;
    float: left;
}

div#imageContainer {
    margin: auto;
    width: 180px;
    border: 1px solid silver;
    padding: 15px;
    overflow: auto;
}

div.image.red {background-color: red}
div.image.blue {background-color: blue}
div.image.green {background-color: green}
div.image.orange {background-color: orange}
div.image.silver {background-color: silver}
div.image.yellow {background-color: yellow}
div.image.black {background-color: black}
div.image.gold {background-color: gold}
div.image.brown {background-color: brown}
div.image.grey {background-color: grey}
div.image.whitesmoke {background-color: whitesmoke}

JavaScript

$("div.image").each(function(i, obj){
    
    var clone;
    var position;
    clone = $(obj).clone();
    $(clone).addClass("clonedItem");
    position = $(obj).position();
    
    $(obj).bind("mouseover", function(e){
        
        $(".clonedItem").animate({
            height: "30px",
            width: "30px"
        }, 200, function(){$(this).remove();});
        
        $("div.image").css("z-index", 1);
        $(clone).css("top", position.top).css("left", position.left).css("z-index", 1000);
        
        $(clone).appendTo("#imageContainer").css("position", "absolute").animate({
            height: "60px",
            width: "60px"
        }, 200, function(){
            
            $(clone).bind("mouseout", function(e){
                 $(clone).animate({
                    height: "30px",
                    width: "30px"
                 }, 200, function(){$(clone).remove();});
                
            }); // end mouseout
            
        }); // end animate callback
        
    }); // end mouseover
    
}); // end each