02.02.2024

Montage en 800x600px avec une image à survoler. 

J'ai essayé d'écrire le code pour qu'il soit facile à modifier: taille, arrondi et filtre.

<div style="width: 800px; height: 600px; text-align: center; margin: 30px auto;">
<p id="sv">&nbsp;</p>
<p id="ab1" class="ab">&nbsp;</p>
<p id="ab2" class="ab">&nbsp;</p>
<p id="ab3" class="ab">&nbsp;</p>
<p id="ab4" class="ab">&nbsp;</p>
<p id="ab5" class="ab">&nbsp;</p>
<p id="ab6" class="ab">&nbsp;</p>
<p id="ab7" class="ab">&nbsp;</p>
<p id="ab8" class="ab">&nbsp;</p>
<p id="ab9" class="ab">&nbsp;</p>
<p id="ab10" class="ab">&nbsp;</p>
</div>

<style><!--
#sv{position:absolute; z-index:10;width:800px; height:600px;}
.ab{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/H_dD0S-IWAvC13HQEB2Q5GvJcrU.jpg'); background-size:800px 600px; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white, 4px 4px 4px black; transition:all 2s;}
#ab1{border:3px ridge white; transform:scale(1); border-radius:5%; filter:grayscale(1);}
#ab2{border:3px ridge white; transform:scale(0.9); border-radius:10%; filter:grayscale(0.9);}
#ab3{border:3px ridge white; transform:scale(0.8); border-radius:15%; filter:grayscale(0.8);}
#ab4{border:3px ridge white; transform:scale(0.7); border-radius:20%; filter:grayscale(0.7);}
#ab5{border:3px ridge white; transform:scale(0.6); border-radius:25%; filter:grayscale(0.6);}
#ab6{border:3px ridge white; transform:scale(0.5); border-radius:30%; filter:grayscale(0.5);}
#ab7{border:3px ridge white; transform:scale(0.4); border-radius:35%; filter:grayscale(0.4);}
#ab8{border:3px ridge white; transform:scale(0.3); border-radius:40%; filter:grayscale(0.3);}
#ab9{border:3px ridge white; transform:scale(0.2); border-radius:45%; filter:grayscale(0.2);}
#ab10{border:3px ridge white; transform:scale(0.1); border-radius:50%; filter:grayscale(0);}
#sv:hover ~ #ab1,#sv:hover ~ #ab2,#sv:hover ~ #ab3,#sv:hover ~ #ab4,#sv:hover ~ #ab5,#sv:hover ~ #ab6,#sv:hover ~ #ab7,#sv:hover ~ #ab8,#sv:hover ~ #ab9,#sv:hover ~ #ab10{ transform:scale(1); border-radius:5%; filter:grayscale(0); box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white, 1px 1px 4px black;}
--></style>