22.10.2024

 

Clic sur chaque section pour l'agrandir puis clic sur l'image agrandie pour la réduire.

 

---

<div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey;">

<input id="vc1" class="vc" src="http://ekladata.com/C4wJFt-SfFhYVXGhmBL7a2ZoRBY.jpg" type="image" /> 

<input id="vc2" class="vc" src="http://ekladata.com/B1MdbhLOTmNbk5IWcr_UnnchQ_g.jpg" type="image" /> 

<input id="vc3" class="vc" src="http://ekladata.com/nLT_9kfw8eSvcWe783VymiPsW5k.jpg" type="image" /> 

<input id="vc4" class="vc" src="http://ekladata.com/va1jDHU1fn4S6USE8bP4ipTjbwI.jpg" type="image" /> 

<input id="vc5" class="vc" src="http://ekladata.com/WsQ2rDHLXC_wNpTcz8qmlmVy6cU.jpg" type="image" /> 

<input id="vc6" class="vc" src="http://ekladata.com/uhWj9dPgCB3rMUUg2nkTpfc925c.jpg" type="image" /> 

<input id="vc7" class="vc" src="http://ekladata.com/kDGrNl5Omk0NQeJ0K3FTycCFz8o.jpg" type="image" /> 

<input id="vc8" class="vc" src="http://ekladata.com/HUVDmts9UmI8H9pdNA5DpayYZis.jpg" type="image" />

<p id="comm">Clic sur chaque section pour l'agrandir puis clic sur l'image agrandie pour la r&eacute;duire.</p>

<p id="reclic">&nbsp;</p>

</div>

<style><!--

.vc{position:absolute; width:1200px; height:675px; border:6px ridge white; margin-top:0px; filter:hue-rotate(180deg);transition:all 1s;}

#vc1{z-index:10; box-sizing:border-box; transform:translate(-600px, -390px) rotate(-30deg);}

#vc2{z-index:9; box-sizing:border-box; transform:translate(600px, -400px) rotate(30deg);}

#vc3{z-index:8; box-sizing:border-box; transform:translate(600px, 380px) rotate(-30deg);}

#vc4{z-index:7; box-sizing:border-box; transform:translate(-600px, 400px) rotate(29deg);}

#vc5{z-index:6; box-sizing:border-box; transform:translate(-880px, 0px) rotate(0deg);}

#vc6{z-index:5; box-sizing:border-box; transform:translate(0px, -530px) rotate(0deg);}

#vc7{z-index:4; box-sizing:border-box; transform:translate(880px, 0px) rotate(0deg);}

#vc8{z-index:3; box-sizing:border-box; transform:translate(0px, 520px) rotate(0deg);}

#comm{position:absolute; z-index:2; width:500px; height:130px; background:LightGreen; border:4px ridge grey; font-size:25px; text-align:center; transform:translate(340px,250px);}

#reclic{position:absolute; z-index:1; width:1200px; height:675px; transform:translate(0px,0px);}

#vc1:focus ~ #reclic,#vc2:focus ~ #reclic,#vc3:focus ~ #reclic,#vc4:focus ~ #reclic,#vc5:focus ~ #reclic,#vc6:focus ~ #reclic,#vc7:focus ~ #reclic,#vc8:focus ~ #reclic{z-index:15;}

#vc1:focus,#vc2:focus,#vc3:focus,#vc4:focus,#vc5:focus,#vc6:focus,#vc7:focus,#vc8:focus{z-index:11; transform:translate(0px,0px) rotate(0deg); filter:hue-rotate(0deg);}

--></style>