Division

 

Montage en 1200px par 675px (16/9) pour 6+1 images.

Chaque image étant divisée en 2 parties et les boutons étant survolés par un bouton invisible, cela multiplie les lignes de code.

Le code est paramétré pour un survol des boutons mais vous pouvez modifier cette commande par un clic en remplaçant hover par focus dans les dernières lignes de code. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/vL78-fZHnJ-DAMSYxOwwvoOMAKE.jpg'); background-size: cover;"><input id="cde1" class="cde" type="text" /> <input id="cde2" class="cde" type="text" /> <input id="cde3" class="cde" type="text" /> <input id="cde4" class="cde" type="text" /> <input id="cde5" class="cde" type="text" /> <input id="cde6" class="cde" type="text" />
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<p id="bt3" class="bt">&nbsp;</p>
<p id="bt4" class="bt">&nbsp;</p>
<p id="bt5" class="bt">&nbsp;</p>
<p id="bt6" class="bt">&nbsp;</p>
<p id="mg1g" class="mg">&nbsp;</p>
<p id="mg1d" class="mg">&nbsp;</p>
<p id="mg2g" class="mg">&nbsp;</p>
<p id="mg2d" class="mg">&nbsp;</p>
<p id="mg3g" class="mg">&nbsp;</p>
<p id="mg3d" class="mg">&nbsp;</p>
<p id="mg4g" class="mg">&nbsp;</p>
<p id="mg4d" class="mg">&nbsp;</p>
<p id="mg5g" class="mg">&nbsp;</p>
<p id="mg5d" class="mg">&nbsp;</p>
<p id="mg6g" class="mg">&nbsp;</p>
<p id="mg6d" class="mg">&nbsp;</p>
</div>

<style><!--
.cde{position:absolute; z-index:10; width:60px; height:60px; border:none; border-radius:50%; background:transparent; }
.bt{position:absolute; z-index:1; width:60px; height:60px; border-radius:50%; background:lime; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white;}
#cde1,#bt1{transform:translate(570px,60px);}
#cde2,#bt2{transform:translate(570px,160px);}
#cde3,#bt3{transform:translate(570px,260px);}
#cde4,#bt4{transform:translate(570px,360px);}
#cde5,#bt5{transform:translate(570px,460px);}
#cde6,#bt6{transform:translate(570px,560px);}
.mg{position:absolute; z-index:5; width:600px; height:675px; margin-top:0px; transition:all 1s;}
#mg1g{background:url('http://ekladata.com/WVw4WkfUgtq73IW3O0pEJ3ROzNo.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 5%, 80% 10%, 10% 20%, 10% 15%);}
#mg1d{background:url('http://ekladata.com/WVw4WkfUgtq73IW3O0pEJ3ROzNo.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 5%, 90% 15%, 90% 20%, 20% 10%);}
#mg2g{background:url('http://ekladata.com/vUCpl_s5Eb8rF58of24nPumm_yw.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 20%, 80% 25%, 10% 35%, 10% 30%);}
#mg2d{background:url('http://ekladata.com/vUCpl_s5Eb8rF58of24nPumm_yw.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 20%, 90% 30%, 90% 35%, 20% 25%);}
#mg3g{background:url('http://ekladata.com/fJqQOztRc8G5sXjlT49dRj9QKCE.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 35%, 80% 40%, 10% 50%, 10% 45%);}
#mg3d{background:url('http://ekladata.com/fJqQOztRc8G5sXjlT49dRj9QKCE.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 35%, 90% 45%, 90% 50%, 20% 40%);}
#mg4g{background:url('http://ekladata.com/4vZDSExj2rAjlSJeygsPhkuZKiY.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 50%, 80% 55%, 10% 65%, 10% 60%);}
#mg4d{background:url('http://ekladata.com/4vZDSExj2rAjlSJeygsPhkuZKiY.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 50%, 90% 60%, 90% 65%, 20% 55%);}
#mg5g{background:url('http://ekladata.com/j4LfsoeYyrLr9A6DVYYZbEfhfGA.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 65%, 80% 70%, 10% 80%, 10% 75%);}
#mg5d{background:url('http://ekladata.com/j4LfsoeYyrLr9A6DVYYZbEfhfGA.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 65%, 90% 75%, 90% 80%, 20% 70%);}
#mg6g{background:url('http://ekladata.com/VXf9EJ_O45aRfc5zuuoOBxYdKFw.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px); clip-path:polygon(80% 80%, 80% 85%, 10% 95%, 10% 90%);}
#mg6d{background:url('http://ekladata.com/VXf9EJ_O45aRfc5zuuoOBxYdKFw.jpg'); background-size:1200px 675px; background-position:-600px 0px; transform:translate(599px,0px); clip-path:polygon(20% 80%, 90% 90%, 90% 95%, 20% 85%);}
#cde1:hover ~ #mg1g,#cde1:hover ~ #mg1d,#cde2:hover ~ #mg2g,#cde2:hover ~ #mg2d,#cde3:hover ~ #mg3g,#cde3:hover ~ #mg3d,#cde4:hover ~ #mg4g,#cde4:hover ~ #mg4d,#cde5:hover ~ #mg5g,#cde5:hover ~ #mg5d,#cde6:hover ~ #mg6g,#cde6:hover ~ #mg6d{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>