• Art.11.9.21

    7 images au ratio 16/9.

    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/h3DZlGRWDYljc_Q9sYYhh_lQOds.jpg'); background-size: cover;"><input id="cv0" type="text" value="clic" /><input id="cv1" class="cv" type="button" value="A" /> <input id="cv2" class="cv" type="button" value="B" /> <input id="cv3" class="cv" type="button" value="C" /> <input id="cv4" class="cv" type="button" value="D" /> <input id="cv5" class="cv" type="button" value="E" /> <input id="cv6" class="cv" type="button" value="F" />
    <img id="mv1" class="mv" src="http://ekladata.com/p_bsBL7Z_jVHdYP6teiTfSEVhmA.jpg" alt="" />
    <img id="mv2" class="mv" src="http://ekladata.com/WO0oGqSUTcTzjLNwHu53gV5myZ8.jpg" alt="" />
    <img id="mv3" class="mv" src="http://ekladata.com/o_ojX3ezUirZjOPNJtgi3MFgbro.jpg" alt="" />
    <img id="mv4" class="mv" src="http://ekladata.com/SDXEx7d_0zNMmUQaltx6iEbfRGw.jpg" alt="" />
    <img id="mv5" class="mv" src="http://ekladata.com/MtANVEjBeNjHKHF85ecmY5uahfk.jpg" alt="" />
    <img id="mv6" class="mv" src="http://ekladata.com/GHuPEHAYrRxqzI3Ny-v8DvkvCP0.jpg" alt="" />
    </div>
    <style><!--
    #cv0{position:absolute; z-index:1; width:50px; font-size:30px; color:white!important; font-weight:bold; border:none; background:transparent; transform:translate(20px,30px);}
    .cv{position:absolute; z-index:1; width:30px; height:30px; border-radius:50%; border:none; font-size:25px; text-align:center; line-height:30px;}
    #cv1{transform:translate(20px,100px);}
    #cv2{transform:translate(20px,150px);}
    #cv3{transform:translate(20px,200px);}
    #cv4{transform:translate(20px,250px);}
    #cv5{transform:translate(20px,300px);}
    #cv6{transform:translate(20px,350px);}
    .mv{position:absolute; z-index:5; width:0px; height:562px; transform:translate(0px,0px) perspective(200px) rotatey(90deg); transform-origin:center left; transition:all 1s;}
    #cv1:focus ~ #mv1,#cv2:focus ~ #mv2,#cv3:focus ~ #mv3,#cv4:focus ~ #mv4,#cv5:focus ~ #mv5,#cv6:focus ~ #mv6{width:1000px; transform:translate(0px,0px) perspective(1000px); rotatey(0deg);}
    --></style>