18a.04.2024

Désolé ! Ce montage sans intérêt, pour m'occuper par cette froide journée !

Montage en 1000x563px et 5 images.déjà publiées...

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left;">
<p id="sv">Survol ronds des centres.</p>
<p id="rd1" class="mart">&nbsp;</p>
<p id="rd2" class="mart">&nbsp;</p>
<p id="rd3" class="mart">&nbsp;</p>
<p id="rd1a" class="marta">&nbsp;</p>
<p id="rd2a" class="marta">&nbsp;</p>
<p id="rd3a" class="marta">&nbsp;</p>
<p id="rd1b" class="martb">&nbsp;</p>
<p id="rd2b" class="martb">&nbsp;</p>
<p id="rd3b" class="martb">&nbsp;</p>
<p id="rd1c" class="martc">&nbsp;</p>
<p id="rd2c" class="martc">&nbsp;</p>
<p id="rd3c" class="martc">&nbsp;</p>
<p id="rd1d" class="martd">&nbsp;</p>
<p id="rd2d" class="martd">&nbsp;</p>
<p id="rd3d" class="martd">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; z-index:1; width:250px; font-size:25px; transform:translate(0px,230px);}
.mart{position:absolute; z-index:1; background:url('http://ekladata.com/Xl9xX2-nQXjKV2JTIaqRuGppXFw.jpg'); background-size:1000px 563px; transition:all 1s;}
.marta{position:absolute; z-index:1; background:url('http://ekladata.com/JW0v454PTVx9_XxU0Tt2z_QlVfA.jpg'); background-size:1000px 563px; transition:all 1s;}
.martb{position:absolute; z-index:1; background:url('http://ekladata.com/fVP0QtnQxAcqQ6RveMVBxB-CXT0.jpg'); background-size:1000px 563px; transition:all 1s;}
.martc{position:absolute; z-index:1; background:url('http://ekladata.com/iG48BlCAx6Fn23vN9eDYR1SzCWI.jpg'); background-size:1000px 563px; transition:all 1s;}
.martd{position:absolute; z-index:1; background:url('http://ekladata.com/d9TVtHJop_-9hoj3NlJ6odUIaow.jpg'); background-size:1000px 563px; transition:all 1s;}
#rd1{width:200px; height:200px; border-radius:50%; transform:translate(50px,20px); background-position:-50px -20px;}
#rd2{width:100px; height:100px; border-radius:50%; transform:translate(0px,70px); background-position:0px -70px;}
#rd3{width:100px; height:100px; border-radius:50%; transform:translate(200px,70px); background-position:-200px -70px;}
#rd1a{width:200px; height:200px; border-radius:50%; transform:translate(50px,320px); background-position:-50px -320px;}
#rd2a{width:100px; height:100px; border-radius:50%; transform:translate(0px,370px); background-position:0px -370px;}
#rd3a{width:100px; height:100px; border-radius:50%; transform:translate(200px,370px); background-position:-200px -370px;}
#rd1b{width:200px; height:200px; border-radius:50%; transform:translate(750px,320px); background-position:-750px -320px;}
#rd2b{width:100px; height:100px; border-radius:50%; transform:translate(700px,370px); background-position:-700px -370px;}
#rd3b{width:100px; height:100px; border-radius:50%; transform:translate(900px,370px); background-position:-900px -370px;}
#rd1c{width:200px; height:200px; border-radius:50%; transform:translate(750px,20px); background-position:-750px -20px;}
#rd2c{width:100px; height:100px; border-radius:50%; transform:translate(700px,70px); background-position:-700px -70px;}
#rd3c{width:100px; height:100px; border-radius:50%; transform:translate(900px,70px); background-position:-900px -70px;}
#rd1d{width:300px; height:300px; border-radius:50%; transform:translate(350px,100px); background-position:-350px -100px;}
#rd2d{width:150px; height:150px; border-radius:50%; transform:translate(425px,25px); background-position:-425px -25px;}
#rd3d{width:150px; height:150px; border-radius:50%; transform:translate(425px,350px); background-position:-425px -350px;}
#rd1:hover,#rd1a:hover,#rd1b:hover,#rd1c:hover,#rd1d:hover{z-index:10; width:1000px; height:563px; border-radius:0%; transform:translate(0px,0px); background-position:0px 0px;}
--></style>