Diapo 2

Pour simplifier l'adaptation aux personnes utilisant un ratio de 4/3, anciennement plus utilisé et qui était le format des écrans télévision, ici en 800x600px.

Modifications du code en jaune.

 

<div style="position: relative; margin: 30px auto; width: 800px; height: 600px; text-align: left;">
<p id="lac0">&nbsp;</p>
<img id="lac1" class="lac" src="http://ekladata.com/rFZsfZh91vxjKTtaX7AVaks0uzM@800x600.jpg" alt="" /> <img id="lac2" class="lac" src="http://ekladata.com/I44et7ThMQx-DREp5Jrnyjc-UWQ@800x600.jpg" alt="" /> <img id="lac3" class="lac" src="http://ekladata.com/YmrKciGjo2pnx6Go47BFUPV3wlk@800x600.jpg" alt="" /> <img id="lac4" class="lac" src="http://ekladata.com/7JrX3SidzbxxWN1I1ZCJDTRuOuY@800x600.jpg" alt="" /></div>
<style><!--
#lac0{position:absolute; z-index:10; width:800px; height:600px; transform:translate(0px,0px);}

#lac0:hover ~ #lac1,#lac0:hover ~ #lac2,#lac0:hover ~ #lac3,#lac0:hover ~ #lac4{animation-play-state:paused;}
.lac{position:absolute; z-index:1; width:400px; height:300px; box-sizing:border-box; border:3px ridge white;}
#lac1{animation:corn1 12s linear 0s infinite normal; transform-origin:top left;}
@keyframes corn1{
0% {z-index:1; opacity:0.5;transform : translate(0px,0px) scale(1);}
1% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
21% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
23% {z-index:1;opacity:1; transform : translate(0px,0px) scale(1);}
100% {z-index:1;opacity:0.5; transform : translate(0px,0px) scale(1);}}
#lac2{animation:corn2 12s linear 0s infinite normal; transform-origin:top left;}
@keyframes corn2{
0% {z-index:1; opacity:0.5;transform : translate(400px,0px) scale(1);}
25% {z-index:1; opacity:0.5;transform : translate(400px,0px) scale(1);}
26% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
46% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
48% {z-index:1;opacity:0.5; transform : translate(400px,0px) scale(1);}
100% {z-index:1;opacity:0.5; transform : translate(400px,0px) scale(1);}}
#lac3{animation:corn3 12s linear 0s infinite normal; transform-origin:top left;}
@keyframes corn3{
0% {z-index:1; opacity:0.5;transform : translate(400px,300px) scale(1);}
50% {z-index:1; opacity:0.5;transform : translate(400px,300px) scale(1);}
51% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
71% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
72% {z-index:1;opacity:0.5; transform : translate(400px,300px) scale(1);}
100% {z-index:1;opacity:0.5; transform : translate(400px,300px) scale(1);}}
#lac4{animation:corn4 12s linear 0s infinite normal; transform-origin:top left;}
@keyframes corn4{
0% {z-index:1; opacity:0.5;transform : translate(0px,300px) scale(1);}
74% {z-index:1;opacity:0.5; transform : translate(0px,300px) scale(1);}
75% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
95% {z-index:5;opacity:1; transform : translate(0px,0px) scale(2);}
96% {z-index:1;opacity:0.5; transform : translate(0px,300px) scale(1);}
100% {z-index:1;opacity:0.5; transform : translate(0px,300px) scale(1);}}
--></style>