-
Diaporama A
Survolez chaque vignette.
Prenons la porte !Montage en 800x600px, format plébiscité !
<div id="fd">
<p id="b1"> </p>
<p id="b2"> </p>
<p id="b3"> </p>
<p id="b4"> </p>
<p id="b5"> </p>
<p id="m1"> </p>
<p id="m2"> </p>
<p id="m3"> </p>
<p id="m4"> </p>
<p id="m5"> </p>
<p id="tx">Survolez chaque vignette.<br /><br />Prenons la porte !</p>
</div>
<style><!--
#fd{position:relative; width:800px; height:600px; border:1px solid black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/leaf-brown.jpg');}
#tx{position:absolute; width:150px; text-align:center; font-size:20pt; color:coral; text-shadow:1px 1px black; transform:translate(100px,50px);}
#b1{position:absolute; z-index:5; transform:translate(10px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
#b2{position:absolute; z-index:5; transform:translate(10px,100px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
#b3{position:absolute; z-index:5; transform:translate(10px,190px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
#b4{position:absolute; z-index:5; transform:translate(10px,280px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
#b5{position:absolute; z-index:5; transform:translate(10px,370px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/boutons/1px-par-1px.png'); width:60px; height:60px; border-radius:50%;}
#m1{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,10px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5415.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
#m2{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,100px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5432.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
#m3{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,190px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5439.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
#m4{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,280px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5441.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
#m5{transition:all 1s linear; position:absolute; z-index:2; transform:translate(10px,370px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/30/DSCN5448.JPG'); width:60px; height:60px; border-radius:50%; border:1px solid black;}
#b1:hover ~ #m1{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
#b2:hover ~ #m2{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
#b3:hover ~ #m3{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
#b4:hover ~ #m4{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
#b5:hover ~ #m5{transform:translate(300px,0px); width:450px; height:600px; border-radius:0%;}
--></style>
...
...