• Exemple 181

    Un montage simple pour 5 images (de mon village) au ratio 16/9 et montage de 1000px par 562px.

    On peut mettre une bordure et une couleur de fond, si on le souhaite.

    Survol

     

     

     

     

     


    <div style="width: 1000px; height: 562px; margin: 5px auto; ">
    <p id="vd0">Survol</p>
    <p id="vd1" class="vd">&nbsp;</p>
    <p id="vd2" class="vd">&nbsp;</p>
    <p id="vd3" class="vd">&nbsp;</p>
    <p id="vd4" class="vd">&nbsp;</p>
    <p id="vd5" class="vd">&nbsp;</p>
    </div>

    <style><!--
    #vd0{position:absolute; z-index:1; width:200px; transform:translate(400px,20px); font-size:30px;}
    .vd{position:absolute; z-index:1; width:300px; height:170px; border:4px solid white; transition:all 1s linear;}
    #vd1{box-sizing:border-box; background:url('http://ekladata.com/oJUiDwKgQm0BKWvyluBaTfd-f5Q.jpg'); background-size:cover; transform:translate(30px,250px) rotate(-20deg);}
    #vd2{box-sizing:border-box; background:url('http://ekladata.com/P-rjjq68zcXiv-PqncToNC31kmg.jpg'); background-size:cover; transform:translate(670px,250px) rotate(20deg);}
    #vd3{box-sizing:border-box; background:url('http://ekladata.com/xvO7G2MZPwhxd3PGkKNnH3_1f3s.jpg'); background-size:cover; transform:translate(170px,150px) rotate(-10deg);}
    #vd4{box-sizing:border-box; background:url('http://ekladata.com/kUL2N9YVZK9S3NxqS14tJ0JhVRg.jpg'); background-size:cover; transform:translate(530px,150px) rotate(10deg);}
    #vd5{box-sizing:border-box; background:url('http://ekladata.com/U9LkGi0TxgifkH6y2p9EKjc2pVs.jpg'); background-size:cover; transform:translate(350px,100px) rotate(0deg);}
    #vd1:hover,#vd2:hover,#vd3:hover,#vd4:hover,#vd5:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px) rotate(0deg);}
    --></style>