Cloud: version survol

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; background: url('https://ekladata.com/88GQSUOZz95ivEuieLaYwCn7Sdg.jpg'); background-size: cover;">
<p id="p0">Survol</p>
<p id="p1" class="p">&nbsp;</p>
<p id="p2" class="p">&nbsp;</p>
<p id="p3" class="p">&nbsp;</p>
<p id="p4" class="p">&nbsp;</p>
<p id="p5" class="p">&nbsp;</p>
<p id="p6" class="p">&nbsp;</p>
<p id="p7" class="p">&nbsp;</p>
<p id="p8" class="p">&nbsp;</p>
<p id="p9" class="p">&nbsp;</p>
<p id="p10" class="p">&nbsp;</p>
</div>

<style><!--
#p0{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); transform:translate(25vw,1vw); text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black;}
.p{position:absolute; z-index:1; width:5vw; height:5vw; border-radius:50%; box-shadow:inset 0.4vh 0.4vh 0.6vh white, inset -0.4vh -0.4vh 0.6vh black;transition:all 1s linear;}
#p1{background:url('https://ekladata.com/zYHMBwr_1llR8q_nebFkBXeCs_0.jpg'); background-size:cover; transform:translate(2vw,2vw);}
#p2{background:url('https://ekladata.com/frKxhFfDA8e5HwPXbnF2DZ6-5is.jpg'); background-size:cover; transform:translate(2vw,8vw);}
#p3{background:url('https://ekladata.com/BAp6186vR2idlbZeCyGy6JSdZtE.jpg'); background-size:cover; transform:translate(2vw,14vw);}
#p4{background:url('https://ekladata.com/f0sgJpbTLburDfNRQRvrSJ0rncw.jpg'); background-size:cover; transform:translate(2vw,20vw);}
#p5{background:url('https://ekladata.com/7qMSuPxrsV65N1jBzCsWQvf_kvQ.jpg'); background-size:cover; transform:translate(2vw,26vw);}
#p6{background:url('https://ekladata.com/vzMrFSkHfpWoQvkFGg1yigHagyY.jpg'); background-size:cover; transform:translate(53vw,2vw);}
#p7{background:url('https://ekladata.com/yDi2D0JkVpIQivxaNCyuqQZU_Lo.jpg'); background-size:cover; transform:translate(53vw,8vw);}
#p8{background:url('https://ekladata.com/UUfIFoMxwyzakv6xj8BRqDbI9kE.jpg'); background-size:cover; transform:translate(53vw,14vw);}
#p9{background:url('https://ekladata.com/Nv-ocLx7RXP4Ta-x-F_ShJ09KB4.jpg'); background-size:cover; transform:translate(53vw,20vw);}
#p10{background:url('https://ekladata.com/fW02T4mwgJp5-S7h64QlIFl7rfY.jpg'); background-size:cover; transform:translate(53vw,26vw);}
#p1:hover,#p2:hover,#p3:hover,#p4:hover,#p5:hover,#p6:hover,#p7:hover,#p8:hover,#p9:hover,#p10:hover{z-index:10; width:60vw; height:33.75vw; border-radius:0%; box-shadow:none; transform:translate(0vw,0vw);}
--></style>