JSFiddle - React, Tailwind, and code Playground

by Jacktea

HTML

<div class="sq-group">
<div id="sq1" class="square"></div>
<div id="sq2" class="square"></div>
<div id="sq3" class="square"></div>
<div id="sq4" class="square"></div>
<div id="sq5" class="square"></div>
<div id="sq6" class="square"></div>
<div id="sq7" class="square"></div>
<div id="sq8" class="square"></div>
<div id="sq9" class="square"></div>
<div id="sq10" class="square"></div>
<div id="sq11" class="square"></div>
<div id="sq12" class="square"></div>
<div id="sq13" class="square"></div>
</div>

CSS

.square {position:absolute;
background:url("http://img-fotki.yandex.ru/get/9488/95248486.7/0_b7bfa_b26ebabf_orig");}

.square:hover {transform: scale(1.1);
    -webkit-transform: scale(1.1);}
.sq-group{position: absolute;
position:absolute;}

#sq1 {height: 756px;width: 576px;}
#sq2 {height: 698px; width: 532px; left: 30px; top:37px;}
#sq3 {height: 640px; width: 488px; left: 52px; top:66px;}
#sq4 { height: 582px; width: 444px; left: 74px; top: 95px;}
#sq5 { height: 524px; width: 400px; left: 96px; top:124px;}
#sq6 { height: 466px; width: 356px; left:118px; top:153px;}
#sq7 { height: 408px; width: 312px; left:140px; top:182px;}
#sq8 { height: 350px; width: 268px; left:162px; top:211px;}
#sq9 { height: 292px; width: 224px; left:184px; top:240px;}
#sq10 { height: 234px; width: 180px; left:206px; top:269px}
#sq11 { height: 176px; width: 136px; left:228px; top:298px}
#sq12 { height: 118px; width: 92px; left:250px; top:327px;}
#sq13 { height: 60px; width: 48px; left:272px; top:356px;}