<div style="width:1200px; height:675px; margin:50px 0 0 -20px; border:1px solid black;">
<p id="aa0" class="aa"> </p>
<p id="aa1" class="aaa"> </p>
<p id="aa2" class="aaa"> </p>
<p id="aa3" class="aaa"> </p>
<p id="aa4" class="aaa"> </p>
<p id="ab0" class="aa"> </p>
<p id="ab1" class="aba"> </p>
<p id="ab2" class="aba"> </p>
<p id="ab3" class="aba"> </p>
<p id="ab4" class="aba"> </p>
<p id="ac0" class="aa"> </p>
<p id="ac1" class="aca"> </p>
<p id="ac2" class="aca"> </p>
<p id="ac3" class="aca"> </p>
<p id="ac4" class="aca"> </p>
<p id="ad0" class="aa"> </p>
<p id="ad1" class="ada"> </p>
<p id="ad2" class="ada"> </p>
<p id="ad3" class="ada"> </p>
<p id="ad4" class="ada"> </p>
</div>
<style><!--
.aa{position:absolute; z-index:10; width:600px; height:337px; margin-top:0px;}
#aa0{transform:translate(0px,0px);}
.aaa{position:absolute; z-index:1; width:600px; height:337px; margin-top:0px; transform:translate(0px,0px); background:url('https://image.eklablog.com/x8sol_LlLh6Qcy95r3CJIEscCqE=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FYYqA5v_NDtqovQnReifd08PBcY0.jpg'); background-size:cover; transition:width 2s 0s, height 2s 0s, box-shadow 2s 0s, transform 2s 2s;}
#aa1{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,0px) scale(1);}
#aa2{box-sizing:border-box; border:6px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,0px) scale(0.8);}
#aa3{box-sizing:border-box; border:8px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,0px) scale(0.6);}
#aa4{box-sizing:border-box; border:8px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,0px) scale(0.4);}
#ab0{transform:translate(600px,0px);}
.aba{position:absolute; z-index:1; width:600px; height:337px; margin-top:0px; background:url('https://image.eklablog.com/MyBB5r3AvsScEu8pvqjFuDVhgOA=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FUqYaDqlXKgO79z5kzzc_xKhZzng.jpg'); background-size:cover; transition:width 2s 0s, height 2s 0s, margin 2s 0s, transform 2s 2s;}
#ab1{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,0px) scale(1);}
#ab2{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,0px) scale(0.8);}
#ab3{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,0px) scale(0.6);}
#ab4{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,0px) scale(0.4);}
#ac0{transform:translate(600px,338px);}
.aca{position:absolute; z-index:1; width:600px; height:337px; margin-top:0px; background:url('https://image.eklablog.com/zm_CElPYUA5MVB074gTTm_6Q3p0=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2FduaXXX5GxIZpYUlmIaITzGMrRQ8.jpg'); background-size:cover; transition:width 2s 0s, height 2s 0s, margin 2s 0s, transform 2s 2s;}
#ac1{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,338px) scale(1);}
#ac2{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,338px) scale(0.8);}
#ac3{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,338px) scale(0.6);}
#ac4{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(600px,338px) scale(0.4);}
#ad0{transform:translate(0px,338px);}
.ada{position:absolute; z-index:1; width:600px; height:337px; margin-top:0px; background:url('https://image.eklablog.com/mOruTY1yT-QdXPpy0lN-oig8Fz4=/filters:no_upscale()/http%3A%2F%2Fekladata.com%2Fd0sauaUn7JGqCWBFSPoAi-EFjHk.jpg'); background-size:cover; transition:width 2s 0s, height 2s 0s, margin 2s 0s, transform 2s 2s;}
#ad1{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,338px) scale(1);}
#ad2{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,338px) scale(0.8);}
#ad3{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,338px) scale(0.6);}
#ad4{box-sizing:border-box; border:4px ridge white; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px black; transform:translate(0px,338px) scale(0.4);}
#aa0:hover~#aa1,#aa0:hover~#aa2,#aa0:hover~#aa3,#aa0:hover~#aa4{z-index:5; width:1200px; height:675px; margin:0px 0px 0px 0px; transform:translate(0px,0px) scale(1); box-shadow:none;}
#ab0:hover~#ab1,#ab0:hover~#ab2,#ab0:hover~#ab3,#ab0:hover~#ab4{z-index:5; width:1200px; height:675px; margin:0px 0px 0px 0px; margin-left:-600px; transform:translate(600px,0px) scale(1); box-shadow:none;}
#ac0:hover~#ac1,#ac0:hover~#ac2,#ac0:hover~#ac3,#ac0:hover~#ac4{z-index:5; width:1200px; height:675px; margin:0px 0px 0px 0px; margin:-338px 0px 0px -600px; transform:translate(600px,338px) scale(1); box-shadow:none;}
#ad0:hover~#ad1,#ad0:hover~#ad2,#ad0:hover~#ad3,#ad0:hover~#ad4{z-index:5; width:1200px; height:675px; margin:0px 0px 0px 0px; margin:-338px 0px 0px 0px; transform:translate(0px,338px) scale(1); box-shadow:none;}
--></style>
SURVOL