-
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"> </p>
<p id="vd2" class="vd"> </p>
<p id="vd3" class="vd"> </p>
<p id="vd4" class="vd"> </p>
<p id="vd5" class="vd"> </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>