Art.03B.5.21

8 images au ratio 16/9.

Survol pour colorer puis Clic maintenu pour agrandir.

**************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
<p id="conf0">Survol pour colorer puis Clic maintenu pour agrandir.</p>
<img id="conf1" class="conf" src="http://ekladata.com/cTXOE8po3UFEVEm_TCDvM2XMt2s.jpg" alt="" />
<img id="conf2" class="conf" src="http://ekladata.com/VVLNDkJ9ErVr6fxu3mEzg4Pt28c.jpg" alt="" />
<img id="conf3" class="conf" src="http://ekladata.com/sUUU_HaHwJPZKJUDxXm002xZKQ0.jpg" alt="" />
<img id="conf4" class="conf" src="http://ekladata.com/hTMPrp6Px3HgiyHIN8QWw64G4ig.jpg" alt="" />
<img id="conf5" class="conf" src="http://ekladata.com/vImMNlkcsyzNHsC_QpeXz7xUlR8.jpg" alt="" />
<img id="conf6" class="conf" src="http://ekladata.com/VgHISl7RE2NE-yZRb8cquiNAmIo.jpg" alt="" />
<img id="conf7" class="conf" src="http://ekladata.com/Ykwn7PR2PtH1BEhxzt0WMsW2D04.jpg" alt="" />
<img id="conf8" class="conf" src="http://ekladata.com/5PcZXXQFiSCpBbwO0x_ViRQUjo0.jpg" alt="" />
</div>
<style><!--
#conf0{position:absolute; z-index:1; box-sizing:border-box; width:1000px; height:50px; transform:translate(0px,250px); text-align:center; padding:20px; font-size:20px;}
.conf{position:absolute; z-index:1; width:1000px; height:560px; filter:grayscale(1); transition:all 1s, filter 0s;}
#conf1{clip-path:polygon(0% 0%, 25% 0%, 12.5% 40%, 12.5% 40%);}
#conf2{clip-path:polygon(37.5% 0%, 37.5% 0%, 50% 40%, 25% 40%);}
#conf3{clip-path:polygon(50% 0%, 75% 0%, 62.5% 40%, 62.5% 40%);}
#conf4{clip-path:polygon(87.5% 0%, 87.5% 0%, 100% 40%, 75% 40%);}
#conf5{clip-path:polygon(12.5% 60%, 12.5% 60%, 25% 100%, 0% 100%);}
#conf6{clip-path:polygon(25% 60%, 50% 60%, 37.5% 100%, 37.5% 100%);}
#conf7{clip-path:polygon(62.5% 60%, 62.5% 60%, 75% 100%, 50% 100%);}
#conf8{clip-path:polygon(75% 60%, 100% 60%, 87.5% 100%, 87.5% 100%);}
#conf1:hover,#conf2:hover,#conf3:hover,#conf4:hover,#conf5:hover,#conf6:hover,#conf7:hover,#conf8:hover{z-index:5; filter:grayscale(0);}
#conf1:active,#conf2:active,#conf3:active,#conf4:active,#conf5:active,#conf6:active,#conf7:active,#conf8:active{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>