• Montage 61

    Images au ration 16/9.


    <div style="position: relative; overflow: hidden; width: 60vw; height: 33.75vw; text-align: left; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/0xp7fTxlM7RhMqFOnlGS6zQPS4k.jpg'); background-size: cover;"><input id="cde1" type="text" value="clic puis survol" /> <img id="mg1" class="mg" src="http://ekladata.com/LSD7WPSnBgGmjbuSyPdDRdcop2k.jpg" alt="" /> <img id="mg2" class="mg" src="http://ekladata.com/scaXgU-KZEsutA_nvh-FV86EIzQ.jpg" alt="" /> <img id="mg3" class="mg" src="http://ekladata.com/9GkAGOPf_0u2G-xrNhUdhmOh_X8.jpg" alt="" /> <img id="mg4" class="mg" src="http://ekladata.com/l-fvjLliaGiidJrHW-jyeaolL2E.jpg" alt="" /> <img id="mg5" class="mg" src="http://ekladata.com/hdD3Dcq-ao-eQPg79wNw1nFv5Eo.jpg" alt="" /> <img id="mg6" class="mg" src="http://ekladata.com/ECVFrw6pn97tVONcaEAzGbJMxms.jpg" alt="" /> <img id="mg7" class="mg" src="http://ekladata.com/D0zTexLaDwH2dcHfeHFRqsrws_s.jpg" alt="" /> <img id="mg8" class="mg" src="http://ekladata.com/QEZ0oRW5mtYVelpptb7lYmDDbQY.jpg" alt="" /> <img id="mg9" class="mg" src="http://ekladata.com/p_XZCIeYaqxDI4iM-F73XqQUOPI.jpg" alt="" /> <img id="mg10" class="mg" src="http://ekladata.com/UzH3OC2gHDqLbbCkTZycsb3KlQ0.jpg" alt="" /></div>

    <style><!--
    #cde1{position:absolute; z-index:1; width:12vw; height:2vw; border:0.2vh solid green; border-radius:1vw; background:lime; box-shadow:inset -0.2vw -0.2vw 0.6vw black, inset 0.2vw 0.2vw 0.6vw white; text-align:center; line-height:2vw; font-size:1.5vw; transform:translate(24vw,0vw);}
    .mg{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.6vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #mg1{transform:translate(-14vw,3vw) rotate(3deg);}
    #mg2{transform:translate(-14vw,10vw) rotate(-10deg);}
    #mg3{transform:translate(-14vw,15vw) rotate(25deg);}
    #mg4{transform:translate(-14vw,25vw) rotate(3deg);}
    #mg5{transform:translate(-14vw,30vw) rotate(-10deg);}
    #mg6{transform:translate(74vw,5vw) rotate(10deg);}
    #mg7{transform:translate(74vw,10vw) rotate(0deg);}
    #mg8{transform:translate(74vw,17vw) rotate(7deg);}
    #mg9{transform:translate(74vw,30vw) rotate(-5deg);}
    #mg10{ transform:translate(74vw,25vw) rotate(10deg);}

    #cde1:focus ~ #mg1{transform:translate(5vw,3vw) rotate(3deg);}
    #cde1:focus ~ #mg2{transform:translate(10vw,8vw) rotate(-10deg);}
    #cde1:focus ~ #mg3{transform:translate(8vw,13vw) rotate(25deg);}
    #cde1:focus ~ #mg4{transform:translate(15vw,18vw) rotate(10deg);}
    #cde1:focus ~ #mg5{transform:translate(5vw,23vw) rotate(0deg);}
    #cde1:focus ~ #mg6{transform:translate(35vw,3vw) rotate(-10deg);}
    #cde1:focus ~ #mg7{transform:translate(45vw,8vw) rotate(0deg);}
    #cde1:focus ~ #mg8{transform:translate(35vw,13vw) rotate(7deg);}
    #cde1:focus ~ #mg9{transform:translate(42vw,18vw) rotate(-5deg);}
    #cde1:focus ~ #mg10{transform:translate(35vw,23vw) rotate(10deg);}

    #cde1:focus ~ #mg1:hover,#cde1:focus ~ #mg2:hover,#cde1:focus ~ #mg3:hover,#cde1:focus ~ #mg4:hover,#cde1:focus ~ #mg5:hover,#cde1:focus ~ #mg6:hover,#cde1:focus ~ #mg7:hover,#cde1:focus ~ #mg8:hover,#cde1:focus ~ #mg9:hover,#cde1:focus ~ #mg10:hover{z-index:5; width:60vw; height:33.75vw; border:none; transform:translate(0vw,0vw) rotate(0deg);}
    --></style>