JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="flower chunk1">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk15">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk2">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div> 
    
    <div class="flower chunk3">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div> 
    
    <div class="flower chunk4">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div> 
</div>


<div class="container">
    <div class="flower chunk5">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk6">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk7">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk8">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
</div>

<div class="container">
    <div class="flower chunk9">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk10">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk11">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    
    <div class="flower chunk12">
    <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
</div>

CSS

.container {
    white-space: nowrap;
}
.flower {
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
}
.flower img {
    width: 100%;
    height: 100%;
}
.flower div {
    width: 200px;
    height: 200px;
    position: relative;
}

.chunk2 div {
    left: -100px;
}
.chunk3 div {
    top: -100px;
}
.chunk4 div {
    top: -100px;
    left: -100px;
}

JavaScript

$('div.flower').click(function() {

    var resize = 1.30;

    var $this = $(this);
    var $inner = $this.find('div');

    $this.animate({
        'width': $this.width() * resize,
        'height': $this.width() * resize
    });

    var p = {
        top: parseInt($inner.css('top')),
        left: parseInt($inner.css('left'))
    };
    console.log(p);
    $inner.animate({
        'width': $inner.width() * resize,
        'height': $inner.width() * resize,
        'top': p.top * resize,
        'left': p.left * resize
    });


});