Montage 284

8 images au ratio 16/9. Mes images sont hébergées au format 1920x1080px, ce qui les rend lourdes à transférer, pour des connexions lentes; j'ai ajouté, dans leurs adresses, @900x506 qui les réduit en  900x506px et en diminue le poids de moitié environ; vous pouvez coller vos adresses images avec cet ajout ou non ... ça fonctionne tout de même !

Clic sur chaque bouton et retour par un clic sur la grande image.

C
L
I
C

<div style="width: 900px; height: 506px; margin: 5px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/2ljZ343EU0ucRzCkqoxFq30EyQ0@900x506.jpg'); background-size: cover;"><input id="chx1" class="chx" type="text" /> <input id="chx2" class="chx" type="text" /> <input id="chx3" class="chx" type="text" /> <input id="chx4" class="chx" type="text" /> <input id="chx5" class="chx" type="text" /> <input id="chx6" class="chx" type="text" /> <input id="chx7" class="chx" type="text" />
<p id="zo">C<br /> L<br /> I<br /> C</p>
<img id="soir1" class="soir" src="http://ekladata.com/STwwLYg0xtauNSJDo_OEffY_Cy4@900x506.jpg" alt="" /> <img id="soir2" class="soir" src="http://ekladata.com/KKpTDdybx7KDMdQPyVAKOrU_eeU@900x506.jpg" alt="" /> <img id="soir3" class="soir" src="http://ekladata.com/dexADs9avBM3QTajzUz5262Bt00@900x506.jpg" alt="" /> <img id="soir4" class="soir" src="http://ekladata.com/ixT2Ruim1Hxrb5IBi2mC4f5jrp8@900x506.jpg" alt="" /> <img id="soir5" class="soir" src="http://ekladata.com/_xNmT9Ufic06GKpg_41OPvlVRTc@900x506.jpg" alt="" /> <img id="soir6" class="soir" src="http://ekladata.com/FwcalOKWnazlyVE2Q818Up8SIn0@900x506.jpg" alt="" /> <img id="soir7" class="soir" src="http://ekladata.com/eh11_8jkwCPeYNWqSNcRLjE62Ao@900x506.jpg" alt="" /></div>

<style><!--
#zo{position:absolute; z-index:1; width:40px; height:506px; background:rgba(0,0,0,0.3); text-align:center; font-size:20px; transform:translate(860px, 0px); color:white; text-shadow:1px 1px black;}
.chx{position:absolute; z-index:2; width:20px; height:20px; border:none; border-radius:50%; box-shadow:inset 1px 1px 4px black;}
#chx1{transform:translate(870px,150px);}
#chx2{transform:translate(870px,190px);}
#chx3{transform:translate(870px,230px);}
#chx4{transform:translate(870px,270px);}
#chx5{transform:translate(870px,310px);}
#chx6{transform:translate(870px,350px);}
#chx7{transform:translate(870px,390px);}
.soir{position:absolute; z-index:5; width:900px; height:506px; clip-path:polygon(0% 0%, 0% 50%, 0% 50%, 0% 100%); transition:all 1s linear;}
#chx1:focus ~ #soir1,#chx2:focus ~ #soir2,#chx3:focus ~ #soir3,#chx4:focus ~ #soir4,#chx5:focus ~ #soir5,#chx6:focus ~ #soir6,#chx7:focus ~ #soir7{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>