• Clic retour

    Le principe est de faire monter, en premier plan un élément (id="rev") qui permettra la clic du retour pour tous les clics

     

    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>