nb/opac 1

5 images en 16/9 horizontales et 3 images en 16/9 verticales.

Le survol les colore et le clic affiche la grande image correspondante, un second clic la réduit.

<div style="width: 60vw; height: 24vw; border: 0.4vh ridge grey; margin: 0.1vh auto; text-align: left; background: linear-gradient(to bottom,#996633 0%, #cccc99 100%);">

<input id="flr0" class="flrb" src="http://ekladata.com/u9FYeiw_3PyJ-BO5BP1Ij-j1HLs@96x173.jpg" type="image" />

<input id="flr1" class="flra" src="http://ekladata.com/N_u24nSUrveblGApvEi0rM1WlVw@307x173.jpg" type="image" />

<input id="flr2" class="flrb" src="http://ekladata.com/IhyxczPF4_ymmPfsBguzZb-2UXo@96x173.jpg" type="image" />

<input id="flr3" class="flra" src="http://ekladata.com/UnXhX1juEFQwkwyMKxt-DerhMjs@307x173.jpg" type="image" />

<input id="flr4" class="flrb" src="http://ekladata.com/SFuYiOVqZ6TvAboGnePHzS6ubz4@96x173.jpg" type="image" />

<input id="flr5" class="flra" src="http://ekladata.com/L2FMxtk0QZ15ZCGoEiJ2XWgcpZY@307x173.jpg" type="image" />

<input id="flr6" class="flra" src="http://ekladata.com/SReVXI-G4niB4tGnu7_qiMRQZuw@307x173.jpg" type="image" />

<input id="flr7" class="flra" src="http://ekladata.com/jE4qRW2pr8rOyazf16j7_Ipg4qs@307x173.jpg" type="image" />

<img id="gf0" class="gfb" src="http://ekladata.com/u9FYeiw_3PyJ-BO5BP1Ij-j1HLs.jpg" alt="" />

<img id="gf1" class="gfa" src="http://ekladata.com/N_u24nSUrveblGApvEi0rM1WlVw.jpg" alt="" />

<img id="gf2" class="gfb" src="http://ekladata.com/IhyxczPF4_ymmPfsBguzZb-2UXo.jpg" alt="" />

<img id="gf3" class="gfa" src="http://ekladata.com/UnXhX1juEFQwkwyMKxt-DerhMjs.jpg" alt="" />

<img id="gf4" class="gfb" src="http://ekladata.com/SFuYiOVqZ6TvAboGnePHzS6ubz4.jpg" alt="" />

<img id="gf5" class="gfa" src="http://ekladata.com/L2FMxtk0QZ15ZCGoEiJ2XWgcpZY.jpg" alt="" />

<img id="gf6" class="gfa" src="http://ekladata.com/SReVXI-G4niB4tGnu7_qiMRQZuw.jpg" alt="" />

<img id="gf7" class="gfa" src="http://ekladata.com/jE4qRW2pr8rOyazf16j7_Ipg4qs.jpg" alt="" /></div>

<style><!--
.flra{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; -webkit-filter:grayscale(1) brightness(0.5);}
.gfa{position:absolute; z-index:100; width:0vw; height:0vw; border-radius:50%; left:50vw; top:25vw; transition:all 1.5s linear;}
#flr1{transform:translate(9vw,2vw);}
#flr3{transform:translate(34vw,2vw);}
#flr5{transform:translate(3.5vw,13vw);}
#flr6{transform:translate(21.5vw,13vw);}
#flr7{transform:translate(39.5vw,13vw);}

#flr1:hover,#flr3:hover,#flr5:hover,#flr6:hover,#flr7:hover{-webkit-filter:grayscale(0) brightness(1);}
#flr1:focus ~ #gf1,#flr3:focus ~ #gf3,#flr5:focus ~ #gf5,#flr6:focus ~ #gf6,#flr7:focus ~ #gf7{width:100vw; height:56.25vw; border-radius:0%; left:0; top:0;}

.flrb{position:absolute; z-index:1; width:5vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; -webkit-filter:grayscale(1) brightness(0.5);}
.gfb{position:absolute; z-index:100; width:0vw; height:0vw; border-radius:50%; left:50vw; top:25vw; transition:all 1.5s linear;}
#flr0{transform:translate(2vw,2vw);}
#flr2{transform:translate(27vw,2vw);}
#flr4{transform:translate(52vw,2vw);}
#flr0:hover, #flr2:hover,#flr4:hover{-webkit-filter:grayscale(0) brightness(1);}
#flr0:focus ~ #gf0,#flr2:focus ~ #gf2,#flr4:focus ~ #gf4{width:31.5vw; height:56.25vw; border-radius:0%; left:30vw; top:0;}
--></style>