Présentation 2

Survolez le montage.

Variante avec découpe en 8 parties et retard entre chaque animation individuelle; toujours en "brut de fonderie" !

<div id="h1">
<p id="h2">&nbsp;</p>
<p id="h3">&nbsp;</p>
<p id="h4">&nbsp;</p>
<p id="h5">&nbsp;</p>
<p id="h6">&nbsp;</p>
<p id="h7">&nbsp;</p>
<p id="h8">&nbsp;</p>
<p id="h9">&nbsp;</p>
<p id="h10">&nbsp;</p>
</div>
<style><!--
#h1{position:relative; width:800px; height:600px; margin:5px auto; background:url(https://ekladata.com/Sm1oA1ImUvX8ToJjnJtMyXWzQBs/00004.jpg); border:1px solid black;}
#h2{ position:absolute; z-index:5; width:800px; height:600px; transform:translate(0px,0px);}
#h3{ position:absolute; z-index:1; transition:all 1s linear 0.5s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/DSkc-44eIaQE7xIhp9g1kFAIiRw/6331.jpg); background-position:50% 50%; transform:translate(50px,50px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h4{ position:absolute; z-index:1; transition:all 1s linear 1s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/e5Xl_UK99PpNaHclUUXEOhMsbbI/6332.jpg); background-position:50% 50%; transform:translate(220px,50px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h5{ position:absolute; z-index:1; transition:all 1s linear 1.5s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/_cAPj192kF5QmVU0QJ0JXiWL_E0/6333.jpg); background-position:50% 50%; transform:translate(390px,50px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h6{ position:absolute; z-index:1; transition:all 1s linear 2s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/oqOjF67MHOlPwoPlIUANO4qZbfY/6334.jpg); background-position:50% 50%; transform:translate(560px,50px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h7{ position:absolute; z-index:1; transition:all 1s linear 2.5s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/npG5bIHZc4nFXdytZw64rhXHLAg/6335.jpg); background-position:50% 50%; transform:translate(50px,300px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h8{ position:absolute; z-index:1; transition:all 1s linear 3s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/2TQgO73CU92_ckvFzUS8ZW2Q86M/6336.jpg); background-position:50% 50%; transform:translate(220px,300px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h9{ position:absolute; z-index:1; transition:all 1s linear 3.5s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/7B3IqyYdK1JxF5UO9jnU5_18Ug0/6337.jpg); background-position:50% 50%; transform:translate(390px,300px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h10{ position:absolute; z-index:1; transition:all 1s linear 4s; width:150px; height:150px; border-radius:50%; background:url(https://ekladata.com/FvJIDLj8nIB7xXHbuYwXMJDBHw0/6338.jpg); background-position:50% 50%; transform:translate(560px,300px); box-shadow:4px 4px 6px black inset, -4px -4px 6px white inset;}
#h2:hover ~ #h3{z-index:4; transform:translate(0px,0px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h4{z-index:4; transform:translate(400px,0px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h5{z-index:4; transform:translate(0px,150px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h6{z-index:4; transform:translate(400px,150px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h7{z-index:4; transform:translate(0px,300px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h8{z-index:4; transform:translate(400px,300px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h9{z-index:4; transform:translate(0px,450px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
#h2:hover ~ #h10{z-index:4; transform:translate(400px,450px); width:400px; height:150px; border-radius:0%; box-shadow:0px 0px inset;}
--></style>