Eki eder 1

Voici une page demandée qui me fait manipuler des dimensions d'une autre époque: 640x480px, du moins sur un PC bureau !

Photo de fond en 800x600px et 4 vignettes en 640x480px qui s'agrandissent au survol.

La taille et et le nombre des vignettes est à ajuster à vos choix.

<div style="width: 800px; height: 600px; position: relative; margin: 10px auto; background: url('http://ekladata.com/FR2ek0WxISe23Np6olaSc1YBBGo.jpg'); border: 4px ridge white; box-sizing: border-box;">
<p id="m1" class="rd">&nbsp;</p>
<p id="m2" class="rd">&nbsp;</p>
<p id="m3" class="rd">&nbsp;</p>
<p id="m4" class="rd">&nbsp;</p>
<p id="m5">Survolez chaque vignette.</p>
</div>

<style><!--
.rd{position: absolute; z-index:1; transition:all 1.5s ease-out; width:120px; height:120px; border-radius:50%; border:3px solid white; box-shadow:4px 4px 8px black;}
#m1{ transform:translate(50px,40px); background:url(http://ekladata.com/ZSG3yxOq-NruNqjeYg5V6WC5TDI.jpg); background-size:cover;}
#m2{ transform:translate(600px,40px); background:url(http://ekladata.com/LW3enovO6dvjRon9x08HSdAPFM8.jpg); background-size:cover;}
#m3{ transform:translate(50px,400px); background:url(http://ekladata.com/nSxDqr7M-wZU55WabN1Sg4G_uDs.jpg); background-size:cover;}
#m4{ transform:translate(600px,400px); background:url(http://ekladata.com/XDmZTGuL1iQppuqxqbhzVAaCY4o.jpg); background-size:cover;}
#m5{position:absolute; z-index:1; width:500px; text-align:center; font-size:28pt; color:yellow; text-shadow:1px 1px black; transform:translate(150px,520px);}

#m1:hover{ z-index:10; transform:translate(80px,60px); width:640px; height:480px; border-radius:0%;}
#m2:hover{ z-index:10; transform:translate(80px,60px); width:640px; height:480px; border-radius:0%;}
#m3:hover{ z-index:10; transform:translate(80px,60px); width:640px; height:480px; border-radius:0%;}
#m4:hover{ z-index:10; transform:translate(80px,60px); width:640px; height:480px; border-radius:0%;;}
--></style>