Exemple 3

Le clic affiche l'image en plein écran. 8 images en 16/9 horizontales mais on peut panacher avec des images verticales.

Clic

<div style="width: 60vw; height: 33.75vw; text-align: left; margin: 1vh auto; border: 0.6vh ridge grey; background: radial-gradient(ellipse at center, #F6E3CE 0%,#F5D0A9 45%,#F5D0A9 100%);">
<p id="cb0">Clic</p>
<input id="ccb1" class="ccb" src="http://ekladata.com/gLJ-p1rIsLgMy1q3leI6MI-63cM@307x173.jpg" type="image" />
<input id="ccb2" class="ccb" src="http://ekladata.com/b0B451cuTqLgYBqeKKFRuZoZvfU@307x173.jpg" type="image" />
<input id="ccb3" class="ccb" src="http://ekladata.com/SzzcrTH2mpAFXUitP6zoD5Re8Y8@307x173.jpg" type="image" />
<input id="ccb4" class="ccb" src="http://ekladata.com/uBOhbVEeiAHu9RtwU_28OSGvLKE@307x173.jpg" type="image" />
<input id="ccb5" class="ccb" src="http://ekladata.com/IvJgwUPdFR4sLLmMIxTBq6B4rXY@307x173.jpg" type="image" />
<input id="ccb6" class="ccb" src="http://ekladata.com/UfnqLbQNFYABAILSIz0x0yoTfZQ@307x173.jpg" type="image" />
<input id="ccb7" class="ccb" src="http://ekladata.com/eR0ewruLsVN5niuzS6r1XkJEs0k@307x173.jpg" type="image" />
<input id="ccb8" class="ccb" src="http://ekladata.com/TxLPeKUQfwfWHxZBmhsTT7vyqAs@307x173.jpg" type="image" />
<img id="gd1" class="gd" src="http://ekladata.com/gLJ-p1rIsLgMy1q3leI6MI-63cM.jpg">
<img id="gd2" class="gd" src="http://ekladata.com/b0B451cuTqLgYBqeKKFRuZoZvfU.jpg">
<img id="gd3" class="gd" src="http://ekladata.com/SzzcrTH2mpAFXUitP6zoD5Re8Y8.jpg">
<img id="gd4" class="gd" src="http://ekladata.com/uBOhbVEeiAHu9RtwU_28OSGvLKE.jpg">
<img id="gd5" class="gd" src="http://ekladata.com/IvJgwUPdFR4sLLmMIxTBq6B4rXY.jpg">
<img id="gd6" class="gd" src="http://ekladata.com/UfnqLbQNFYABAILSIz0x0yoTfZQ.jpg">
<img id="gd7" class="gd" src="http://ekladata.com/eR0ewruLsVN5niuzS6r1XkJEs0k.jpg">
<img id="gd8" class="gd" src="http://ekladata.com/TxLPeKUQfwfWHxZBmhsTT7vyqAs.jpg">
</div>
<hr style="border:0.3vh double grey;">
...
<style><!--
#cb0{position:absolute; z-index:16; width:10vw; transform:translate(25vw,0vw); text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
.ccb{position:absolute; width:16vw; height:9vw; border:0.4vh solid white; background-size:cover;}
#ccb1{z-index:10; transform:translate(5vw,22vw);}
#ccb2{z-index:9; transform:translate(10vw,19vw);}
#ccb3{z-index:8; transform:translate(15vw,16vw);}
#ccb4{z-index:7; transform:translate(20vw,13vw);}
#ccb5{z-index:6; transform:translate(25vw,11vw);}
#ccb6{z-index:5; transform:translate(30vw,8vw);}
#ccb7{z-index:4; transform:translate(35vw,5vw);}
#ccb8{z-index:3; transform:translate(40vw,2vw);}
.gd{position:absolute; z-index:100; width:100vw; height:0vw; left:0; transform:translate(0vw,0vw); transition:all 1s linear;}

#ccb1:focus ~ #gd1,#ccb2:focus ~ #gd2,#ccb3:focus ~ #gd3,#ccb4:focus ~ #gd4,#ccb5:focus ~ #gd5,#ccb6:focus ~ #gd6,#ccb7:focus ~ #gd7,#ccb8:focus ~ #gd8{height:56.25vw;}
--></style>