Plein écran 11

Exemple avec image de fond et bordure mais supprimés dans le code.

Survol puis clic et reclic sur image agrandie dans une nouvelle page.

<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/9zCTRhQmn2kM2G_q5HNS7Ofss0o.jpg" target="_blank"><img id="ph1" class="ph" src="http://ekladata.com/9zCTRhQmn2kM2G_q5HNS7Ofss0o@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/pHLij8yylUAdHLNiboWA2TOt1QA.jpg" target="_blank"><img id="ph2" class="ph" src="http://ekladata.com/pHLij8yylUAdHLNiboWA2TOt1QA@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/l3jiOFhaVEVYEHrnvG3s4ZqZ5Og.jpg" target="_blank"><img id="ph3" class="ph" src="http://ekladata.com/l3jiOFhaVEVYEHrnvG3s4ZqZ5Og@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/m7z8GOroeqYct76yed_8r94g5wQ.jpg" target="_blank"><img id="ph4" class="ph" src="http://ekladata.com/m7z8GOroeqYct76yed_8r94g5wQ@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/WTvoR7XbqYOCJ_phl1enMHCCskk.jpg" target="_blank"><img id="ph5" class="ph" src="http://ekladata.com/WTvoR7XbqYOCJ_phl1enMHCCskk@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/3kYMQdvUri3sdY3d5EJ9ApS8mVA.jpg" target="_blank"><img id="ph6" class="ph" src="http://ekladata.com/3kYMQdvUri3sdY3d5EJ9ApS8mVA@1152x648.jpg" alt="" /></a>
<a href="http://ekladata.com/2tc46fXufgnIZEE4YZPspj0T1XY.jpg" target="_blank"><img id="ph7" class="ph" src="http://ekladata.com/2tc46fXufgnIZEE4YZPspj0T1XY@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:0.4vh solid white; box-shadow:-0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#ph1{transform:translate(5vw,7vw) rotate(45deg);}
#ph2{transform:translate(10vw,7vw) rotate(45deg);}
#ph3{transform:translate(15vw,7vw) rotate(45deg);}
#ph4{transform:translate(20vw,7vw) rotate(45deg);}
#ph5{transform:translate(25vw,7vw) rotate(45deg);}
#ph6{transform:translate(30vw,7vw) rotate(45deg);}
#ph7{transform:translate(35vw,7vw) rotate(45deg);}
#ph1:hover,#ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover,#ph6:hover,#ph7:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg);}
--></style>