Division 2

Mêmes images mais une animation en 4 parties.

<div style="position: relative; width: 80vw; height: 45vw; margin: 0.1vw auto; border: 0.4vw ridge white; background: url('https://ekladata.com/PhYcf6z5nW04-5rpUSkIclAKqa4.jpg'); background-size: 80vw 45vw; overflow: hidden;">
<p id="ouv">&nbsp;</p>
<p id="pgh" class="page">&nbsp;</p>
<p id="pgb" class="page">&nbsp;</p>
<p id="pdh" class="page">&nbsp;</p>
<p id="pdb" class="page">&nbsp;</p>
</div>
 
<style><!--
#ouv{position:absolute; z-index:10; width:3vw; height:3vw; border:0.1vw solid black; border-radius:50%; background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%); transform:translate(75vw,2vw);}
.page{background:url('https://ekladata.com/8pPuuDI7-c59ViAf0yQ1rgxGsZE.jpg'); background-size:80vw 45vw;}
#pgh{position:absolute; z-index:5; width:40vw; height:22.5vw;background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear;}
#pgb{position:absolute; z-index:5; width:40vw; height:22.5vw;background-position:0vw 22.5vw; transform:translate(0vw,22.5vw); transition:all 1s linear;}
#pdh{position:absolute; z-index:5; width:40vw; height:22.5vw;background-position:40vw 0vw; transform:translate(40vw,0vw); transition:all 1s linear;}
#pdb{position:absolute; z-index:5; width:40vw; height:22.5vw;background-position:40vw 22.5vw; transform:translate(40vw,22.5vw); transition:all 1s linear;}
#ouv:hover ~ #pgh{transform:translate(-41vw,-23vw);}
#ouv:hover ~ #pgb{transform:translate(-41vw,46vw);}
#ouv:hover ~ #pdh{transform:translate(81vw,-23vw);}
#ouv:hover ~ #pdb{transform:translate(81vw,46vw);}
--></style>