Clic retour

6 images dans cet exemple.

 

Clic pour agrandir et clic pour réduire.

---

<div style="position: relative; overflow: hidden; width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge grey;"><input id="mlk1" class="mlk" src="http://ekladata.com/PZJOp27YQUXtsfBonUD2k4jPwXI.jpg" type="image" /> <input id="mlk2" class="mlk" src="http://ekladata.com/lilWMTvcfTmnprID7B9oBVr9PBo.jpg" type="image" /> <input id="mlk3" class="mlk" src="http://ekladata.com/IS6DLTSXipnms2CqsOya75q45Kc.jpg" type="image" /> <input id="mlk4" class="mlk" src="http://ekladata.com/xM37l1OS7x_ywXxvJqklKEjmyvo.jpg" type="image" /> <input id="mlk5" class="mlk" src="http://ekladata.com/MG25Ut2p4CABbgxVSJ-hLzVV5bo.jpg" type="image" /> <input id="mlk6" class="mlk" src="http://ekladata.com/k5JwH72shpCcaKzlLk52PbKt3aw.jpg" type="image" />

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

<p id="action">Clic pour agrandir et clic pour r&eacute;duire.</p>

</div>

<style><!--

#rev{position:absolute; z-index:1; width:1200px; height:675px; border:2px solid red;}

#action{position:absolute; z-index:3; width:1000px; font-size:35px; transform:translate(150px,10px);}

.mlk{position:absolute; width:1200px; height:675px; border:4px solid white; margin-top:0px; transition:all 1s;}

#mlk1{z-index:2; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(1);}

#mlk2{z-index:3; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(0.8);}

#mlk3{z-index:4; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(0.65);}

#mlk4{z-index:5; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(0.5);}

#mlk5{z-index:6; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(0.35);}

#mlk6{z-index:7; box-sizing:border-box; background-size:1200px 675px; transform:translate(0px,0px) scale(0.2);}

#mlk1:focus,#mlk2:focus,#mlk3:focus,#mlk4:focus,#mlk5:focus,#mlk6:focus{z-index:10; transform:translate(0px,0px) scale(1);}

#mlk1:focus ~ #rev,#mlk2:focus ~ #rev,#mlk3:focus ~ #rev,#mlk4:focus ~ #rev,#mlk5:focus ~ #rev,#mlk6:focus ~ #rev{z-index:15;}

--></style>