02a.06.2024

Pour m'amuser et sans trop d'intérêt pour être repris mais un montage que je nomme "papillons".

Montage en 1100px par 619px, avec 4 images horizontales et 2 images verticales à survoler avec hover, à cliquer avec focus ou au clic maintenu avec Active, comme dans le montage précédent.

<div style="width: 1100px; height: 619px; margin: 50px auto; text-align: left;"><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="paph1" class="fd1">&nbsp;</p>
<p id="paph1a" class="fd1">&nbsp;</p>
<p id="paph2" class="fd2">&nbsp;</p>
<p id="paph2a" class="fd2">&nbsp;</p>
<p id="papv1" class="fd3">&nbsp;</p>
<p id="papv1a" class="fd3">&nbsp;</p>
<p id="papv2" class="fd4">&nbsp;</p>
<p id="papv2a" class="fd4">&nbsp;</p>
<p id="paph3" class="fd5">&nbsp;</p>
<p id="paph3a" class="fd5">&nbsp;</p>
<p id="paph4" class="fd6">&nbsp;</p>
<p id="paph4a" class="fd6">&nbsp;</p>
</div>
<style><!--
.cde{position:absolute; z-index:10; width:300px; height:300px; background:transparent; border:none;}
#cde1{transform:translate(50px,0px);}
#cde2{transform:translate(50px,319px);}
#cde3{transform:translate(400px,0px);}
#cde4{transform:translate(400px,319px);}
#cde5{transform:translate(750px,0px);}
#cde6{transform:translate(750px,319px);}
.fd1{position:absolute; z-index:1; height:619px; background:url('http://ekladata.com/kT8TeDatnAA8UonUIAnCdj2y1Ss.jpg'); background-size:1100px 619px; transition:all 1s;}
.fd2{position:absolute; z-index:1; height:619px; background:url('http://ekladata.com/E-VjauRzR7aycmdWdTjHdGargbI.jpg'); background-size:1100px 619px; transition:all 1s;}
.fd3{position:absolute; z-index:1; width:174px; background:url('http://ekladata.com/JRm1khVHL7yoRX45LZRnRGcmwRo.jpg'); background-size:348px 619px; transition:all 1s;}
.fd4{position:absolute; z-index:1; width:174px; background:url('http://ekladata.com/6WAOOEPL-KpvVbyUNJWJLpcI5xo.jpg'); background-size:348px 619px; transition:all 1s;}
.fd5{position:absolute; z-index:1; height:619px; background:url('http://ekladata.com/aeCLCSVFw9eqjPAA_G0cWIJHzKU.jpg'); background-size:1100px 619px; transition:all 1s;}
.fd6{position:absolute; z-index:1; height:619px; background:url('http://ekladata.com/mhSbGNEIil5rVkPTT5PeW2uPn9o.jpg'); background-size:1100px 619px; transition:all 1s;}
#paph1{width:550px; transform-origin:center left; background-position:0px 0px; transform:translate(100px,-150px) scale(0.4) perspective(200px) rotatey(20deg);}
#paph1a{width:550px; transform-origin:center right; background-position:-550px 0px; transform:translate(-240px,-150px) scale(0.4) perspective(200px) rotatey(-20deg);}
#paph2{width:550px; transform-origin:center left; background-position:0px 0px; transform:translate(100px,150px) scale(0.4) perspective(200px) rotatey(20deg);}
#paph2a{width:550px; transform-origin:center right; background-position:-550px 0px; transform:translate(-240px,150px) scale(0.4) perspective(200px) rotatey(-20deg);}
#papv1{height:308px; transform-origin:top center; background-position:0px 0px; transform:translate(450px,30px) scale(0.7) perspective(200px) rotatex(-20deg);}
#papv1a{height:308px; transform-origin:bottom center; background-position:0px -308px; transform:translate(450px,-20px) scale(0.7) perspective(200px) rotatex(20deg);}
#papv2{height:308px; transform-origin:top center; background-position:0px 0px; transform:translate(450px,330px) scale(0.7) perspective(200px) rotatex(-20deg);}
#papv2a{height:308px; transform-origin:bottom center; background-position:0px -308px; transform:translate(450px,280px) scale(0.7) perspective(200px) rotatex(20deg);}
#paph3{width:550px; transform-origin:center left; background-position:0px 0px; transform:translate(800px,-150px) scale(0.4) perspective(200px) rotatey(20deg);}
#paph3a{width:550px; transform-origin:center right; background-position:-550px 0px; transform:translate(460px,-150px) scale(0.4) perspective(200px) rotatey(-20deg);}
#paph4{width:550px; transform-origin:center left; background-position:0px 0px; transform:translate(800px,150px) scale(0.4) perspective(200px) rotatey(20deg);}
#paph4a{width:550px; transform-origin:center right; background-position:-550px 0px; transform:translate(460px,150px) scale(0.4) perspective(200px) rotatey(-20deg);}
#cde1:hover ~ #paph1,#cde2:hover ~ #paph2,#cde5:hover ~ #paph3,#cde6:hover ~ #paph4{z-index:5; background-position:0px 0px; transform:translate(0px,0px) scale(1) perspective(5000px) rotate(0deg);}
#cde1:hover ~ #paph1a,#cde2:hover ~ #paph2a,#cde5:hover ~ #paph3a,#cde6:hover ~ #paph4a{z-index:5; background-position:-550px 0px; transform:translate(550px,0px) scale(1) perspective(5000px) rotate(0deg);}
#cde3:hover ~ #papv1,#cde4:hover ~ #papv2{z-index:5; width:348px; background-position:0px 0px; transform:translate(400px,0px) scale(1) perspective(5000px) rotate(0deg);}
#cde3:hover ~ #papv1a,#cde4:hover ~ #papv2a{z-index:5; width:348px; background-position:0px -308px; transform:translate(400px,308px) scale(1) perspective(5000px) rotate(0deg);}
--></style>