w10

 <div style="height: 675px; margin: 50px 0px 50px -20px; width: 1200px;">

<p id="jd0">SURVOL</p>

<p class="jd" id="jd1">&nbsp;</p>

<p class="jd" id="jd2">&nbsp;</p>

<p class="jd" id="jd3">&nbsp;</p>

<p class="jd" id="jd4">&nbsp;</p>

<p class="jd" id="jd5">&nbsp;</p>

</div>

<style><!--

#jd0{position:absolute; z-index:10; width:300px; font-size:40px; transform:translate(200px,250px) rotate(-30deg);}

.jd{position:absolute; z-index:1; box-sizing:border-box; width:250px; height:250px; border:4px solid white; box-shadow:6px 6px 8px black; border-radius:50%; margin-top:0px; background-size:1200px 675px; transition:1s;}

#jd1{background:url('https://i.goopics.net/jw8uiz.jpg'); background-position:-100px -50px; transform:translate(100px,50px);}

#jd2{background:url('https://i.goopics.net/aysa3k.jpg'); background-position:-475px -50px; transform:translate(475px,50px);}

#jd3{background:url('https://i.goopics.net/rk5ov8.jpg'); background-position:-850px -50px; transform:translate(850px,50px);}

#jd4{background:url('https://i.goopics.net/piwbes.jpg'); background-position:-300px -350px; transform:translate(300px,350px);}

#jd5{background:url('https://i.goopics.net/jh9dtd.jpg'); background-position:-700px -350px; transform:translate(700px,350px);}

#jd1:hover,#jd2:hover,#jd3:hover,#jd4:hover,#jd5:hover{z-index:5; width:1200px; height:675px; box-shadow:none; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}

--></style>

SURVOL