Montage 310

Même principe que le montage précédent, avec d'autres formes; 7 images au ratio 16/9.

<div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 0.1vh solid black; background: linear-gradient(45deg, rgba(128,128,128,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 100%);"><input id="ch1" class="ch" type="text" /><input id="ch2" class="ch" type="text" /><input id="ch3" class="ch" type="text" /><input id="ch4" class="ch" type="text" /><input id="ch5" class="ch" type="text" /><input id="ch6" class="ch" type="text" />
<p id="cd">Clic sur chaque bouton pour changer d'image. Survol grand triangle pour agrandir.</p>
<p id="fr1d" class="fr">&nbsp;</p>
<p id="fr1c" class="fr">&nbsp;</p>
<p id="fr1b" class="fr">&nbsp;</p>
<p id="fr1a" class="fr">&nbsp;</p>
</div>

<style><!--
#cd{position:absolute; z-index:1; width:700px; font-size:20px; transform:translate(100px,0px);}
.ch{position:absolute; z-index:1; width:10px; height:10px; border:none; border-radius:50%; box-shadow:inset 3px 3px 6px black;}
#ch1{transform: translate(850px,150px);}
#ch2{transform: translate(850px,200px);}
#ch3{transform: translate(850px,250px);}
#ch4{transform: translate(850px,300px);}
#ch5{transform: translate(850px,350px);}
#ch6{transform: translate(850px,400px);}
.fr{position:absolute; z-index:1; width:900px; height:506px; background:url('http://ekladata.com/WllMS_Ei623x03CTDrK64mB9lmg.jpg'); background-size:900px 506px; filter:grayscale(1); transition:all 1s linear 0s;}
#fr1a{clip-path:polygon(40% 50%, 90% 10%, 90% 90%, 40% 50%);}
#fr1b{clip-path:polygon(30% 50%, 70% 15%, 70% 85%, 30% 50%);}
#fr1c{clip-path:polygon(25% 50%, 55% 20%, 55% 80%, 25% 50%);}
#fr1d{clip-path:polygon(10% 50%, 40% 27%, 40% 73%, 10% 50%);}
#ch1:focus ~ .fr{background:url('http://ekladata.com/LP7eVfRNZQOptjtkFPkbUzR2Dqg.jpg'); background-size:900px 506px;}
#ch2:focus ~ .fr{background:url('http://ekladata.com/kZ2F0eqSOyTXOuVdcx0oQTGzTK4.jpg'); background-size:900px 506px;}
#ch3:focus ~ .fr{background:url('http://ekladata.com/S77RRgf6_tLbMSNZbILlnXe97zY.jpg'); background-size:900px 506px;}
#ch4:focus ~ .fr{background:url('http://ekladata.com/iemO8EVJOKAzx0MVqSRl6PkiexQ.jpg'); background-size:900px 506px;}
#ch5:focus ~ .fr{background:url('http://ekladata.com/QpiD25oJXhpZPu0wEy3rSqlje_E.jpg'); background-size:900px 506px;}
#ch6:focus ~ .fr{background:url('http://ekladata.com/RqtErengyCBwZ-3ZHtOabKgb46o.jpg'); background-size:900px 506px;}
#fr1a:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>