04.04.2024

 Survol.

Les dimensions sont ajustables à vos besoins.

<div style="width: 1000px; height: 563px; margin: 50px auto;">
<p id="pf0">&nbsp;</p>
<p id="pf1" class="pf">&nbsp;</p>
<p id="pf2" class="pf">&nbsp;</p>
<p id="pf3" class="pf">&nbsp;</p>
<p id="pf4" class="pf">&nbsp;</p>
<p id="pf5" class="pf">&nbsp;</p>
<p id="pf6" class="pf">&nbsp;</p>
<p id="pf7" class="pf">&nbsp;</p>
<p id="pf8" class="pf">&nbsp;</p>
<p id="pf9" class="pf">&nbsp;</p>
</div>
<style><!--
#pf0{position:absolute; z-index:10; width:1000px; height:563px;}
.pf{position:absolute; box-sizing:border-box; width:563px; height:563px; margin-left:215px; border-radius:50%; border:4px solid white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px black; background:url('http://ekladata.com/5eqTDuR4sIndnzBngrNdfPp7Kko.jpg'); background-size:cover; background-position:center center; transition:all 2s;}
#pf1{transform:scale(1); box-shadow:4px 4px 8px black; }
#pf2{transform:scale(0.9);}
#pf3{transform:scale(0.8);}
#pf4{transform:scale(0.7);}
#pf5{transform:scale(0.6);}
#pf6{transform:scale(0.5);}
#pf7{transform:scale(0.4);}
#pf8{transform:scale(0.3);}
#pf9{transform:scale(0.2);}
#pf0:hover~#pf1,#pf0:hover~#pf2,#pf0:hover~#pf3,#pf0:hover~#pf4,#pf0:hover~#pf5,#pf0:hover~#pf6,#pf0:hover~#pf7,#pf0:hover~#pf8,#pf0:hover~#pf9{transform:scale(1); width: 1000px; height: 563px;border-radius:0%; margin-left:0px;}
--></style>