• Montage 292

    Montage de 900px par 506px avec 5 images au ratio 16/9 à survoler

     

     

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto;">
    <p id="vg1" class="vg">&nbsp;</p>
    <p id="vg2" class="vg">&nbsp;</p>
    <p id="vg3" class="vg">&nbsp;</p>
    <p id="vg4" class="vg">&nbsp;</p>
    <p id="vg5" class="vg">&nbsp;</p>
    </div>
    <style><!--
    .vg{position:absolute; transition:all 1s linear;}
    #vg1{z-index:5;box-sizing:border-box; width:250px; height:250px; border:3px ridge grey; background:url('http://ekladata.com/2Pi8numuKfuO1Y0uGtrFZd9ms0o.jpg'); background-size:900px 506px; background-position:-300px -120px; transform:translate(300px,120px);}
    #vg2{z-index:1;box-sizing:border-box; width:170px; height:170px; border:3px ridge grey; background:url('http://ekladata.com/-pW4HbfpPRQKvWoXW-hj_Evrwuo.jpg'); background-size:900px 506px; transform:translate(340px,280px) rotate(45deg);}
    #vg3{z-index:1;box-sizing:border-box; width:170px; height:170px; border:3px ridge grey; background:url('http://ekladata.com/As9fwc0yUrIcdm7z29s8v-R3fA4.jpg'); background-size:900px 506px; transform:translate(460px,160px) rotate(45deg);}
    #vg4{z-index:1;box-sizing:border-box; width:170px; height:170px; border:3px ridge grey; background:url('http://ekladata.com/h9g_C9PfFhQsjw5tSJfl360ob34.jpg'); background-size:900px 506px; transform:translate(340px,40px) rotate(45deg);}
    #vg5{z-index:1;box-sizing:border-box; width:170px; height:170px; border:3px ridge grey; background:url('http://ekladata.com/kTOqvkZD2Z2wivMu0HUEqIgY5pw.jpg'); background-size:900px 506px; transform:translate(220px,160px) rotate(45deg);}
    #vg1:hover,#vg2:hover,#vg3:hover,#vg4:hover,#vg5:hover{z-index:20; width:900px; height:506px; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg);}
    --></style>