• Art.19a.7.21

    4 images au ratio 16/9 à survoler.

     

     

     

     

    ******************
    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
    <p id="gn1" class="gn">&nbsp;</p>
    <p id="gn2" class="gn">&nbsp;</p>
    <p id="gn3" class="gn">&nbsp;</p>
    <p id="gn4" class="gn">&nbsp;</p>
    </div>
    <style><!--
    .gn{position:absolute; z-index:1; width:200px; height:500px; border-radius:75px; box-shadow:4px 4px 6px black, inset -4px -4px 6px black, inset 4px 4px 6px white; filter:hue-rotate(240deg); transition:all 1s, filter 1s 1s;}
    #gn1{background:url('http://ekladata.com/g4sBnizfXE8LgANgI5Q86Ur13lA@1000x562.jpg'); background-size:1000px 562px; background-position:-20px -30px; transform:translate(20px,30px);}
    #gn2{background:url('http://ekladata.com/ycCwK5uAkDlGPfMNjx5TNVV1AQA@1000x562.jpg'); background-size:1000px 562px; background-position:-270px -30px; transform:translate(270px,30px);}
    #gn3{background:url('http://ekladata.com/qsL3r6sAHEJUI0gSN7qtNLoTJXI@1000x562.jpg'); background-size:1000px 562px; background-position:-520px -30px; transform:translate(520px,30px);}
    #gn4{background:url('http://ekladata.com/BxDBBR30-48iDtXLddwYNiTGt5g@1000x562.jpg'); background-size:1000px 562px; background-position:-770px -30px; transform:translate(770px,30px);}
    #gn1:hover,#gn2:hover,#gn3:hover,#gn4:hover{box-sizing:border-box; z-index:5; width:1000px; height:562px; border-radius:none; background-position:0px 0px; transform:translate(0px,0px); filter:hue-rotate(0deg);}
    --></style>