• Montage 264

     6 images au ratio 16/9; survoler chaque partie en diagonale; Clic sur chaque bouton pour changer les images; Exemple en 80x45vw et code en 900px par 506px.

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 1vh auto; border: 3px ridge grey; text-align: left;"><input id="var1" type="text" /><input id="var2" type="text" />
    <p id="lac1" class="lac">&nbsp;</p>
    <p id="lac2" class="lac">&nbsp;</p>
    <p id="lac3" class="lac">&nbsp;</p>
    <p id="lac4" class="lac">&nbsp;</p>
    </div>
    <style><!--
    #var1{position:absolute; z-index:10; width:20px; height:10px; border-radius:0 0 4px 4px; box-shadow:inset -2px -2px 4px black; background:lime; transform:translate(400px,0px);}
    #var2{position:absolute; z-index:10; width:20px; height:10px; border-radius:0 0 4px 4px; box-shadow:inset -2px -2px 4px black; background:lime; transform:translate(500px,0px);}
    .lac{position:absolute; z-index:1; width:900px; height:506px; background-size:900px 506px; transition:all 1s linear;}
    #lac1{background:url('http://ekladata.com/-dB9z90xy6R8yvysGqz-PNl0SEM.jpg'); clip-path:polygon(0% 0%, 100% 0%, 0% 100%);}
    #lac2{background:url('http://ekladata.com/-dB9z90xy6R8yvysGqz-PNl0SEM.jpg');clip-path:polygon(0% 100%, 100% 0%, 50% 50%);}
    #lac1:hover ~ #lac2{z-index:5; clip-path:polygon(0% 100%, 100% 0%, 100% 100%);}
    #lac3{background:url('http://ekladata.com/LfBkcBHr7-KhDdtQZBnQ9CoiRAo.jpg');clip-path:polygon(0% 100%, 100% 0%, 100% 100%);}
    #lac4{background:url('http://ekladata.com/LfBkcBHr7-KhDdtQZBnQ9CoiRAo.jpg');clip-path:polygon(0% 100%, 100% 0%, 50% 50%);}
    #var1:focus, #var2:focus{background:coral;}
    #lac1:hover ~ #lac2{z-index:5; clip-path:polygon(0% 100%, 100% 0%, 100% 100%);}
    #lac3:hover ~ #lac4{z-index:5; clip-path:polygon(0% 100%, 100% 0%, 0% 0%);}
    #var1:focus ~ #lac1, #var1:focus ~ #lac2{background:url('http://ekladata.com/vtC3sUcEumR4Z1q9tuRUtNDM29w.jpg'); background-size:900px 506px;}
    #var1:focus ~ #lac3, #var1:focus ~ #lac4{background:url('http://ekladata.com/XNsrn5ok2ZyDp44Go1r0oou12wI.jpg'); background-size:900px 506px;}
    #var2:focus ~ #lac1, #var2:focus ~ #lac2{background:url('http://ekladata.com/YL15pAFQNQkGSXL6e2CEB9S6Ch8.jpg'); background-size:900px 506px;}
    #var2:focus ~ #lac3, #var2:focus ~ #lac4{background:url('http://ekladata.com/FizJzxZANvU520la298V33iAZ2E.jpg'); background-size:900px 506px;}
    --></style>