Montage 320

7 images au ratio 16/9.

Survol

Clic maintenu

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/nztR2nSzfeNhGah73e6CLjQQY3s.jpg'); background-size: cover;">
<p id="fg">Survol</p>
<p id="fd">Clic maintenu</p>
<img id="ch1" class="ch" src="http://ekladata.com/ei51hlWUBm5UtMXYEhGgaNi3Kro.jpg" alt="" />
<img id="ch2" class="ch" src="http://ekladata.com/P0UOCC5GJ9B42kr3TvFK5msZluE.jpg" alt="" />
<img id="ch3" class="ch" src="http://ekladata.com/N6VndbG3dSWGJwBzp1p8EJFEv7U.jpg" alt="" />
<img id="ch4" class="ch" src="http://ekladata.com/lmJjs7xE5yr8e7TEPmg6gXW6Z4U.jpg" alt="" />
<img id="ch5" class="ch" src="http://ekladata.com/6TqD3Nm6ten9aaEUwTzkA5tpjaM.jpg" alt="" />
<img id="ch6" class="ch" src="http://ekladata.com/H4RIydFFQ3jCZosAcs6kCCvAZs8.jpg" alt="" />
</div>
<style><!--
#fg{position:absolute; z-index:1; width:90px; height:506px; text-align:center; font-size:12px; color:white; text-shadow:1px 1px black; background:rgba(255,255,255,0.3); transform:translate(0px,0px);}
#fd{position:absolute; z-index:1; width:90px; height:506px; text-align:center; font-size:12px; color:white; text-shadow:1px 1px black; background:rgba(255,255,255,0.3); transform:translate(810px,0px);}
.ch{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
#ch1{clip-path:polygon(0% 10%,10% 20%, 10% 20%, 0% 30%);}
#ch2{clip-path:polygon(0% 40%,10% 50%, 10% 50%, 0% 60%);}
#ch3{clip-path:polygon(0% 70%,10% 80%, 10% 80%, 0% 90%);}
#ch4{clip-path:polygon(90% 20%,100% 10%, 100% 30%, 90% 20%);}
#ch5{clip-path:polygon(90% 50%,100% 40%, 100% 60%, 90% 50%);}
#ch6{clip-path:polygon(90% 80%,100% 70%, 100% 90%, 90% 80%);}
#ch1:hover,#ch2:hover,#ch3:hover,#ch4:active,#ch5:active,#ch6:active{z-index:5;clip-path:polygon(0% 0%,100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>