Reprise

Pas si simple que ça de publier un montage animé avec son code: la partie html/css disparaît à la publication et je n'ai l'accès sous le montage pour le rajouter car la largeur de la zone de rédaction est toujours sur celle de base, autour de 700px de large !

Il va falloir chercher dans le html du blog où se trouve cette satanée largeur; celle de publication nous l'avons trouvée; il faut maintenant chercher cette largeur à la rédaction...

De plus, ma première version comportait un cadre avec bordure et image de fond mais cette bordure ou un positionnement (?) faisait que les images agrandies ne touchaient pas la bordure droite du cadre (!?) alors que le code fonctionne bien sur Ekla !

Ce n'est pas gagné !

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;">

<p id="sv">SURVOL</p>

<img id="cp1a" class="cp" src="http://ekladata.com/ygJeDMKfZVfXyDV_O6EnrPEA7nI.jpg" alt="" /> <img id="cp1b" class="cp" src="http://ekladata.com/ygJeDMKfZVfXyDV_O6EnrPEA7nI.jpg" alt="" /> <img id="cp2a" class="cp" src="http://ekladata.com/vqSMTgDUvnhkFtk3bHzxc-JWGR0.jpg" alt="" /> <img id="cp2b" class="cp" src="http://ekladata.com/vqSMTgDUvnhkFtk3bHzxc-JWGR0.jpg" alt="" /> <img id="cp3a" class="cp" src="http://ekladata.com/SqNKyIH_cEraHSYQXDR079tk8qY.jpg" alt="" /> <img id="cp3b" class="cp" src="http://ekladata.com/SqNKyIH_cEraHSYQXDR079tk8qY.jpg" alt="" /> <img id="cp4a" class="cp" src="http://ekladata.com/dSpXRFkbBmINgtrESC9Ka16LDDU.jpg" alt="" /> <img id="cp4b" class="cp" src="http://ekladata.com/dSpXRFkbBmINgtrESC9Ka16LDDU.jpg" alt="" /> <img id="cp5a" class="cp" src="http://ekladata.com/dzYcuHGOOhfTpHgHduz0LeNpK8s.jpg" alt="" /> <img id="cp5b" class="cp" src="http://ekladata.com/dzYcuHGOOhfTpHgHduz0LeNpK8s.jpg" alt="" /></div>

<style><!--

#sv{position:absolute; width:200px; text-align:center; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(500px,50px);} 

.cp{position:absolute; width:1200px; height:675px;}

#cp1a{z-index:3; clip-path:polygon(2% 20%, 18% 20%, 10% 80%, 10% 80%); transition:all 1s;}

#cp1b{z-index:1; clip-path:polygon(10% 0%, 10% 0%, 10% 100%, 10% 100%); transition:all 1s 1s;}

#cp1a:hover{z-index:10; clip-path:polygon(0% 0%, 20% 0%, 20% 100%, 0% 100%);}

#cp1a:hover ~ #cp1b{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#cp2a{z-index:3; clip-path:polygon(30% 20%, 30% 20%, 38% 80%, 22% 80%); transition:all 1s;}

#cp2b{z-index:1; clip-path:polygon(30% 0%, 30% 0%, 30% 100%, 30% 100%); transition:all 1s 1s;}

#cp2a:hover{z-index:10; clip-path:polygon(20% 0%, 40% 0%, 40% 100%, 20% 100%);}

#cp2a:hover ~ #cp2b{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#cp3a{z-index:3; clip-path:polygon(42% 20%, 58% 20%, 50% 80%, 50% 80%); transition:all 1s;}

#cp3b{z-index:1; clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); transition:all 1s 1s;}

#cp3a:hover{z-index:10; clip-path:polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);}

#cp3a:hover ~ #cp3b{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#cp4a{z-index:3; clip-path:polygon(70% 20%, 70% 20%, 78% 80%, 62% 80%); transition:all 1s;}

#cp4b{z-index:1; clip-path:polygon(70% 0%, 70% 0%, 70% 100%, 70% 100%); transition:all 1s 1s;}

#cp4a:hover{z-index:10; clip-path:polygon(60% 0%, 80% 0%, 80% 100%, 60% 100%);}

#cp4a:hover ~ #cp4b{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

#cp5a{z-index:3; clip-path:polygon(82% 20%, 98% 20%, 90% 80%, 90% 80%); transition:all 1s;}

#cp5b{z-index:1; clip-path:polygon(90% 0%, 90% 0%, 90% 100%, 90% 100%); transition:all 1s 1s;}

#cp5a:hover{z-index:10; clip-path:polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%);}

#cp5a:hover ~ #cp5b{z-index:8; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

--></style>

SURVOL

---

.....