• Exemple 196

    6 images au ratio 16/9 

    Survol

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 5px auto;">
    <p id="vc0">Survol</p>
    <p id="vc1" class="vc">&nbsp;</p>
    <p id="vc2" class="vc">&nbsp;</p>
    <p id="vc3" class="vc">&nbsp;</p>
    <p id="vc4" class="vc">&nbsp;</p>
    <p id="vc5" class="vc">&nbsp;</p>
    <p id="vc6" class="vc">&nbsp;</p>
    </div>
    <style><!--
    #vc0{position:absolute; z-index:1; width:150px; font-size:40px; color:coral; text-shadow:2px 2px black; transform:translate(400px,0px);}
    .vc{position:absolute; z-index:1; width:150px; height:300px; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; transition:all 1s linear;}
    #vc1{background:url('http://ekladata.com/71nk736I2r0Y8VdGZ2qRpwA6qz0.jpg'); background-size:1000px 562px; background-position:-150px -150px; border:3px solid grey; transform:translate(150px,150px) rotate(-30deg);}
    #vc2{background:url('http://ekladata.com/BWmLUV62mBumyJeqEqx86hMB5fA.jpg'); background-size:1000px 562px; background-position:-250px -110px; border:3px solid grey; transform:translate(250px,110px) rotate(-15deg);}
    #vc3{background:url('http://ekladata.com/PrynlVe5n9BW0PDboPwzBS3zPPA.jpg'); background-size:1000px 562px; background-position:-350px -90px; border:3px solid grey; transform:translate(350px,90px) rotate(-5deg);}
    #vc4{background:url('http://ekladata.com/0ZEwHlxrsvj0szD1iq5BWpNhJIo.jpg'); background-size:1000px 562px; background-position:-450px -90px; border:3px solid grey; transform:translate(450px,90px) rotate(5deg);}
    #vc5{background:url('http://ekladata.com/uDzyKBpRUHmM-G5l8C-ll-8Dc2M.jpg'); background-size:1000px 562px; background-position:-550px -110px; border:3px solid grey; transform:translate(550px,110px) rotate(15deg);}
    #vc6{background:url('http://ekladata.com/YWn0kCeyfkmE4NBupclcS1o_YPc.jpg'); background-size:1000px 562px; background-position:-650px -150px; border:3px solid grey; transform:translate(650px,150px) rotate(30deg);}
    #vc1:hover,#vc2:hover,#vc3:hover,#vc4:hover,#vc5:hover,#vc6:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg);}
    --></style>