03.04.2024

 Suite à une demande de Frédéric (il se reconnaîtra), je suis revenu et essayé de simplifier l'écriture du code de la page (une seule fois à écrire l'adresse de l'image):

http://pourquoipas732.eklablog.com/animation-7-abyme-css-p1177494

Survol

<div style="width: 1000px; height: 563px; margin: 50px auto; box-shadow: 8px 8px 15px 6px black;">
<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>
<p id="pf10" class="pf">&nbsp;</p>
</div>
<style><!--
#pf0{position:absolute; z-index:10; width:1000px; height:563px;}
.pf{position:absolute; box-sizing:border-box; width:1000px; height:563px; border:4px solid white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px black; background:url('http://ekladata.com/ipir9005Be-FE3onfOH-zIyTJOU.jpg'); background-size:cover; transition:all 2s;}
#pf1{transform:scale(1);}
#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);}
#pf10{transform:scale(0.15);}
#pf0:hover~#pf2,#pf0:hover~#pf3,#pf0:hover~#pf4,#pf0:hover~#pf5,#pf0:hover~#pf6,#pf0:hover~#pf7,#pf0:hover~#pf8,#pf0:hover~#pf9,#pf0:hover~#pf10{transform:scale(1);}
--></style>