• Exemple 51

    Arrêt au survol; 8 images au ratio 16/9 , dimensionnées en 1152x648px par le code.

     

     

     

     

     

     

     

     

    <div style="position: relative; width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; text-align: left; overflow: hidden;">
    <div id="dep">
    <p id="col1" class="col">&nbsp;</p>
    <p id="col2" class="col">&nbsp;</p>
    <p id="col3" class="col">&nbsp;</p>
    <p id="col4" class="col">&nbsp;</p>
    <p id="col5" class="col">&nbsp;</p>
    <p id="col6" class="col">&nbsp;</p>
    <p id="col7" class="col">&nbsp;</p>
    <p id="col8" class="col">&nbsp;</p>
    </div>
    </div>
    <style><!--
    #dep{width:180vw; height:102vw;}
    .col{position:absolute; z-index:1; width:60vw; height:33.75vw;}
    #col1{background:url('http://ekladata.com/vDcRGoO0-4uOAq4Fi3OY7tBMmcc@1152x648.jpg'); transform:translate(0vw,0vw);}
    #col2{background:url('http://ekladata.com/gPbyO-aAozrwyFQ7r5xUOnClnlA@1152x648.jpg'); transform:translate(60vw,0vw);}
    #col3{background:url('http://ekladata.com/g0B1nSE2Fu4anxNQ3bKfHWEscN0@1152x648.jpg'); transform:translate(120vw,0vw);}
    #col4{background:url('http://ekladata.com/_SGeRehMnVUPr2hjIjuekZtwt20@1152x648.jpg'); transform:translate(120vw,33.75vw);}
    #col5{background:url('http://ekladata.com/VOVRyaekbPth6fK-Gl0s5p1K7ks@1152x648.jpg'); transform:translate(120vw,67.5vw);}
    #col6{background:url('http://ekladata.com/rEDwozJ1Z4_d9J3BmehCbNR0EPU@1152x648.jpg'); transform:translate(60vw,67.5vw);}
    #col7{background:url('http://ekladata.com/BZQ2HLIi3-oLsVgJOMlZizP40f4@1152x648.jpg'); transform:translate(0vw,67.5vw);}
    #col8{background:url('http://ekladata.com/OdrdWJDHpLFf8RSmb28vRqp1OHE@1152x648.jpg'); transform:translate(0vw,33.75vw);}
    #dep{animation: pluie 20s linear 0s infinite normal; animation-play-state:running;}
    @keyframes pluie{
    0% {transform:translate(0vw,0vw);}
    10% {transform:translate(0vw,0vw);}
    12% {transform:translate(-60vw,0vw);}
    22% {transform:translate(-60vw,0vw);}
    24% {transform:translate(-120vw,0vw);}
    34% {transform:translate(-120vw,0vw);}
    36% {transform:translate(-120vw,-33.75vw);}
    46% {transform:translate(-120vw,-33.75vw);}
    48% {transform:translate(-120vw,-67.5vw);}
    58% {transform:translate(-120vw,-67.5vw);}
    60% {transform:translate(-60vw,-67.5vw);}
    70% {transform:translate(-60vw,-67.5vw);}
    72% {transform:translate(0vw,-67.5vw);}
    82% {transform:translate(0vw,-67.5vw);}
    84% {transform:translate(0vw,-33.75vw);}
    94% {transform:translate(0vw,-33.75vw);}
    96% {transform:translate(0vw,0vw);}
    100% {transform:translate(0vw,0vw);}}
    #dep:hover{animation-play-state:paused;}
    --></style>