03.03.2024

Rien de bien neuf dans ce montage pour 5 images, déjà publiées mais il faut bien m'occuper par cette journée pluvieuse !

Le nombre d'images et les dimensions du montage sont adaptables.

<div style="width:800px; height:600px; margin:50px auto; text-align:left;">
<p id="pl0">SURVOL</p>
<p id="pl1" class="pl">&nbsp;</p>
<p id="pl2" class="pl">&nbsp;</p>
<p id="pl3" class="pl">&nbsp;</p>
<p id="pl4" class="pl">&nbsp;</p>
<p id="pl5" class="pl">&nbsp;</p>
</div>
<style><!--
#pl0{position:absolute; z-index:1; width:150px; font-size:25px; transform:translate(650px,0px);}
.pl{position:absolute; z-index:1; width:500px; height:100px; border-radius:40px; box-shadow:inset 4px 4px 8px black;transition:all 1s;}
#pl1{background:url('http://ekladata.com/F3zB33-kHdCHTo4SGwHr7MCw5Fk.jpg'); background-size:800px 600px; background-position:0px 0px; transform:translate(0px,0px);}
#pl2{background:url('http://ekladata.com/jH7lXiqs_QryDnkgL-Z_pyIkM2s.jpg'); background-size:800px 600px; background-position:-300px -125px; transform:translate(300px,125px);}
#pl3{background:url('http://ekladata.com/68Wm6LHVfVImPdMHDNSsl8oaoyk.jpg'); background-size:800px 600px; background-position:0px -250px; transform:translate(0px,250px);}
#pl4{background:url('http://ekladata.com/hf6P81Hv_TyKzWvC2aWLK8mRLeI.jpg'); background-size:800px 600px; background-position:-300px -375px; transform:translate(300px,375px);}
#pl5{background:url('http://ekladata.com/mdHv37RMNHB46lQCCVm86JNT1_8.jpg'); background-size:800px 600px; background-position:0px -500px; transform:translate(0px,500px);}
#pl1:hover,#pl2:hover,#pl3:hover,#pl4:hover,#pl5:hover{z-index:5;width:800px; height:600px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>