zoom Nicole

Je ne voulais pas publier cette page, qui est la réponse à une demande, avec les photos de la visiteuse (Loneci) qui publiera ce montage mais j'ai pensé que le principe pourrait intéresser certain(e)s... j'espère qu'elle ne m'en voudra pas trop !

J'ai tiré, à partir de tes photos, des images au ratio 16/9 en 2048x1168px et 3888x2203px pour celle de l'araignée.

Je les ai hébergées sur Ekla et récupéré leurs adresses; le code est le même pour toutes à part leur adresse et le centrage du zoom.

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 2vh auto;"><input id="bt0" class="bt" type="text" value="0" /><input id="bt1" class="bt" type="text" value="1" /><input id="bt2" class="bt" type="text" value="2" /><input id="bt3" class="bt" type="text" value="3" /><input id="bt4" class="bt" type="text" value="4" /><input id="bt5" class="bt" type="text" value="5" /><input id="bt6" class="bt" type="text" value="6" /><input id="bt7" class="bt" type="text" value="7" /><input id="bt8" class="bt" type="text" value="8" />
<p id="fd"><br />Clic sur chaque bouton<br /> pour changer d'image.<br /><br /><br /><br />Survolez chaque image affich&eacute;e<br /> pour l'agrandir dans le cadre.</p>
<p id="nic1">&nbsp;</p>
<p id="nic2">&nbsp;</p>
<p id="nic3">&nbsp;</p>
<p id="nic4">&nbsp;</p>
<p id="nic5">&nbsp;</p>
<p id="nic6">&nbsp;</p>
<p id="nic7">&nbsp;</p>
<p id="nic8">&nbsp;</p>
</div>
<style><!--
#fd{position:absolute; z-index:3; width:60vw; height:33.75vw; background: radial-gradient(ellipse at center, #cfe7fa 0%,#6393c1 100%);  text-align:center; font-size:2.5vw; color:white; text-shadow:0.2vh 0.2vh #0033cc;}
.bt{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border-radius:40% 0 0 40%; text-align:center; font-size:1.2vw; line-height:1.5vw;}
#bt0{transform:translate(58vw,1vw);}
#bt1{transform:translate(58vw,4vw);}
#bt2{transform:translate(58vw,7vw);}
#bt3{transform:translate(58vw,10vw);}
#bt4{transform:translate(58vw,13vw);}
#bt5{transform:translate(58vw,16vw);}
#bt6{transform:translate(58vw,19vw);}
#bt7{transform:translate(58vw,22vw);}
#bt8{transform:translate(58vw,25vw);}

#nic1{position:absolute; z-index:1;width:60vw; height:33.75vw; background:url('http://ekladata.com/itbZ8LVcdtslOF-_jW3cNr4Ezow.jpg'); background-size:100% 100%; background-position:50% 50%; transition: background 2s linear;}
#nic1:hover{background-size:200% 200%; background-position:80% 50%;}
#nic2{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/Ee-nFQGITwBeZPWNG_8mYyhEH2U.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic2:hover{background-size:200% 200%; background-position:50% 40%;}
#nic3{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/ta2HDi06coHBvapSTfJ6at3Vorw.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic3:hover{background-size:200% 200%; background-position:40% 37%;}
#nic4{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/KgXJ63MBe1RZGL4eZ0UaC8ooE_k.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic4:hover{background-size:200% 200%; background-position:50% 45%;}
#nic5{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/4oquu1bJ9_BvYD4uhTWgpHG2NWk.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic5:hover{background-size:250% 250%; background-position:50% 40%;}
#nic6{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/mw67b0EiDoxTw2kNEOVDHl6LR3g.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic6:hover{background-size:200% 200%; background-position:50% 65%;}
#nic7{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/HsPoEMs0dD2nQjnK9PRUlPkF0uU.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic7:hover{background-size:200% 200%; background-position:50% 50%;}
#nic8{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/qVaC2MLouw8WmMLR0LhEIRyfN5k.jpg'); background-size:100% 100%; background-position:50% 50%; transition:background 2s linear;}
#nic8:hover{background-size:200% 200%; background-position:40% 30%;}

.bt:focus{background:lime;}
#bt1:focus ~ #nic1,#bt2:focus ~ #nic2,#bt3:focus ~ #nic3,#bt4:focus ~ #nic4,#bt5:focus ~ #nic5,#bt6:focus ~ #nic6,#bt7:focus ~ #nic7,#bt8:focus ~ #nic8{z-index:6;}
--></style>