• ArtA.3.4.21

    Survol.

     

     

     

     

    Ne retenez que le principe, ici pour 4 images au ratio 16/9, avec filtre hue-rotate et sur un fond.
    Pour obtenir une animation en deux temps (agrandissement puis zoom), il faut utiliser deux attributs différents (width/height et scale) avec un retard.

    <div style="position: relative; overflow: hidden; width: 80vw; height: 45vw; margin: 1vh auto; border: 1px solid black; background: linear-gradient(rgba(237,140,36,1) 0%, rgba(196,196,141,1) 100%); text-align: left;">
    <p id="paq1" class="paq">&nbsp;</p>
    <p id="paq2" class="paq">&nbsp;</p>
    <p id="paq3" class="paq">&nbsp;</p>
    <p id="paq4" class="paq">&nbsp;</p>
    </div>

    <style><!--
    .paq{position:absolute; z-index:1; width:32vw; height:18vw; border:0.4vh ridge white; filter:hue-rotate(180deg); transition:all 2s linear 0s, filter 2s linear 2s, transform 2s linear 3s;}
    #paq1{box-sizing:border-box; transform:translate(0vw,0vw) scale(1); margin:5vw 0 0 5vw; background:url('http://ekladata.com/590yOSIqjrBOH0paHO_5ERRfiTU.jpg'); background-size:cover;}
    #paq2{box-sizing:border-box; transform:translate(0vw,0vw) scale(1); margin:5vw 0 0 40vw; background:url('http://ekladata.com/Y-8-iAX2vhyojv6dwo0tQst5B6E.jpg'); background-size:cover;}
    #paq3{box-sizing:border-box; transform:translate(0vw,0vw) scale(1); margin:25vw 0 0 40vw; background:url('http://ekladata.com/hmEINC5fYoVD3vB58LZ3AfIR3VA.jpg'); background-size:cover;}
    #paq4{box-sizing:border-box; transform:translate(0vw,0vw) scale(1); margin:25vw 0 0 5vw; background:url('http://ekladata.com/nUz9z62Efkn3e2kJHYeVnmcFPu4.jpg'); background-size:cover;}
    #paq1:hover,#paq2:hover,#paq3:hover,#paq4:hover{z-index:5; width:80vw; height:45vw; transform:translate(-10vw,0vw) scale(2); margin:0vw; filter:hue-rotate(0deg);}
    --></style>