Plein écran 12

Une variante du code précédent.

Survol puis clic et reclic sur image agrandie dans une nouvelle page... si cela vous plaît.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
<p id="surv">Survol puis clic et reclic sur image agrandie dans une nouvelle page.</p>
<a href="http://ekladata.com/wq3_iaIVTTfsVNEEXBKa7U3il7s.jpg" target="_blank"><img id="ph1" class="ph" src="http://ekladata.com/wq3_iaIVTTfsVNEEXBKa7U3il7s@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/HADjNsWiaDldky-9Mge46yS9XKY.jpg" target="_blank"><img id="ph2" class="ph" src="http://ekladata.com/HADjNsWiaDldky-9Mge46yS9XKY@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/vehsAh-Gcw9Jc6q21Ayq9OJbj-k.jpg" target="_blank"><img id="ph3" class="ph" src="http://ekladata.com/vehsAh-Gcw9Jc6q21Ayq9OJbj-k@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/AMhpxiSeE7XW4Wrtiv1Y33nx2Wg.jpg" target="_blank"><img id="ph4" class="ph" src="http://ekladata.com/AMhpxiSeE7XW4Wrtiv1Y33nx2Wg@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/dbH-9xcd1MaYyBNuWancfbVi1jg.jpg" target="_blank"><img id="ph5" class="ph" src="http://ekladata.com/dbH-9xcd1MaYyBNuWancfbVi1jg@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/8pB1UxdV2dorBpNExcK2un2yTNg.jpg" target="_blank"><img id="ph6" class="ph" src="http://ekladata.com/8pB1UxdV2dorBpNExcK2un2yTNg@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/B4z41g7RzE0HjgS74ZJ1dqNedXs.jpg" target="_blank"><img id="ph7" class="ph" src="http://ekladata.com/B4z41g7RzE0HjgS74ZJ1dqNedXs@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/cAE2_hvw675THVNcOV61m40llvs.jpg" target="_blank"><img id="ph8" class="ph" src="http://ekladata.com/cAE2_hvw675THVNcOV61m40llvs@1152x648.jpg" alt="" /></a></div>

<style><!--
#surv{position:absolute; z-index:1; width:60vw; text-align:center; font-size:1vw;}
.ph{position:absolute; z-index:1; width:20vw; height:20vw; border-radius:50%; border:0.4vh solid white; box-shadow:-0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#ph1{transform:translate(5vw,7vw) rotatey(45deg);}
#ph2{transform:translate(10vw,7vw) rotatey(45deg);}
#ph3{transform:translate(15vw,7vw) rotatey(45deg);}
#ph4{transform:translate(20vw,7vw) rotatey(45deg);}
#ph5{transform:translate(25vw,7vw) rotatey(45deg);}
#ph6{transform:translate(30vw,7vw) rotatey(45deg);}
#ph7{transform:translate(35vw,7vw) rotatey(45deg);}
#ph8{transform:translate(40vw,7vw) rotatey(45deg);}
#ph1:hover,#ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover,#ph6:hover,#ph7:hover,#ph8:hover{z-index:5; width:60vw; height:33.75vw; border-radius:0%; transform:translate(0vw,0vw) rotatey(0deg);}
--></style>