Plein écran 9

8 images hébergées en 1920x1080px.

Survol de chaque vignette jusqu'à coloration; clic sur chaque vignette pour affichage en grand dans une nouvelle page puis clic sur l'image agrandie pour affichage plein écran.

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid white; margin: 1vh auto; text-align: left;"><a href="http://ekladata.com/eserbkOf9F5C3oqLYkGQhA0owBs.jpg" target="_blank;"><img id="rg1cl1" class="sixh" src="http://ekladata.com/eserbkOf9F5C3oqLYkGQhA0owBs@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/qEW_fRNpuK1CzZYg9bSDT0V3RHA.jpg" target="_blank"><img id="rg1cl2" class="sixh" src="http://ekladata.com/qEW_fRNpuK1CzZYg9bSDT0V3RHA@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/m83ZBNJ5V8a0QT5-bIOspBCZMo0.jpg" target="_blank;"><img id="rg1cl3" class="sixh" src="http://ekladata.com/m83ZBNJ5V8a0QT5-bIOspBCZMo0@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/4pQtQ2QUpGDn6SnbotHOLw79TY4.jpg" target="_blank;"><img id="rg2cl1" class="sixh" src="http://ekladata.com/4pQtQ2QUpGDn6SnbotHOLw79TY4@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/QUOOB_v_mhsyi1cp0nBsLRRS3wA.jpg" target="_blank"><img id="rg2cl2" class="sixh" src="http://ekladata.com/QUOOB_v_mhsyi1cp0nBsLRRS3wA@1152x648.jpg" alt="" /></a> <a href="http://ekladata.com/Kcg-SLnBWnWGNK0F-Y_oENZFfSQ.jpg" target="_blank;"><img id="rg2cl3" class="sixh" src="http://ekladata.com/Kcg-SLnBWnWGNK0F-Y_oENZFfSQ@1152x648.jpg" alt="" /></a></div>
<style><!--
.sixh{position:absolute; z-index:1; width:20vw; height:17vw; border: 0.2vh solid white; filter:grayscale; -webkit-filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1.5s;}
.sixb{position:absolute; z-index:1; width:20vw; height:16.75vw; background-size:60vw 33.75vw; filter:grayscale; -webkit-filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
#rg1cl1{box-sizing:border-box; transform:translate(0vw,0vw);}
#rg1cl2{box-sizing:border-box; transform:translate(20vw,0vw);}
#rg1cl3{box-sizing:border-box; transform:translate(40vw,0vw);}
#rg2cl1{box-sizing:border-box; transform:translate(0vw,17vw);}
#rg2cl2{box-sizing:border-box; transform:translate(20vw,17vw);}
#rg2cl3{box-sizing:border-box; transform:translate(40vw,17vw);}
#rg1cl1:hover,#rg1cl2:hover,#rg1cl3:hover,#rg2cl1:hover,#rg2cl2:hover,#rg2cl3:hover{z-index:5; transform:translate(0vw,0vw); width:60vw; height:33.75vw; filter:grayscale(0); -webkit-filter:grayscale(0);}
--></style>