Clip

Revenons sur ce code, avec l'aide du site:  http://bennettfeely.com/clippy/ qui fournit un code prêt à l'emploi, selon la forme choisie.

Je vais vérifier si le code spécifique pour Chrome est toujours nécessaire: il semble que non.

<div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.1vh solid black;">
<p id="cp0">Survol</p>
<p id="cp1">&nbsp;</p>
<p id="cp2">&nbsp;</p>
<p id="cp3">&nbsp;</p>
<p id="cp4">&nbsp;</p>
</div>
<style><!--
#cp0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(25vw,0vw);}
#cp1{position:absolute; z-index:1; width:24vw; height:13.5vw; transform:translate(5vw,3vw); background:url('https://ekladata.com/7m2i1NJBQyQy-tB0R8v0DvwO9dE.jpg'); background-position:-5vw -3vw; background-size:60vw 33.75vw; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); transition:all 1s linear;}
#cp2{position:absolute; z-index:1; width:24vw; height:13.5vw; transform:translate(32vw,3vw); background:url('https://ekladata.com/Bobsf4gl8M-fG9qE0RD_eyysUQY.jpg'); background-position:-32vw -3vw; background-size:60vw 33.75vw; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); transition:all 1s linear;}
#cp3{position:absolute; z-index:1; width:24vw; height:13.5vw; transform:translate(5vw,18vw); background:url('https://ekladata.com/qoLQ_FGn2pJEeOGSPvI6pA7u0gQ.jpg'); background-position:-5vw -18vw; background-size:60vw 33.75vw; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); transition:all 1s linear;}
#cp4{position:absolute; z-index:1; width:24vw; height:13.5vw; transform:translate(32vw,18vw); background:url('https://ekladata.com/rblXwhHqQIe8d12xA_uPpLHfz9o.jpg'); background-position:-32vw -18vw; background-size:60vw 33.75vw; clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); transition:all 1s linear;}
#cp1:hover,#cp2:hover,#cp3:hover,#cp4:hover{z-index:10; width:60vw; height:33.75vw; background-position:0vw 0vw; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); transform:translate(0vw,0vw);}
--></style>