• Exemple 58

    L'attribut transform:translate(X,Y); oblige à modifier, en même temps, le positionnement horizontal et vertical.

    On peut souhaiter voir nos images s'agrandir en largeur avant de s'agrandir en hauteur (ou l'inverse).

    Un moyen de faire est d'utiliser l'attribut transform:translate(X,Y); pour une dimension en laissant l'autre à zéro et de modifier l'autre dimension par l'attribut margin:X Y;

    En donnant une animation retardée pour l'un ou l'autre, vous obtenez ce genre d'animation.

    J'ai essayé de jouer sur le positionnement de l'image de fond mais le seul attribut: background-position; ne donne pas de bons résultats.

    Survol

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; text-align: left; margin: 1vh auto;">
    <p id="dep0">Survol</p>
    <p id="dep1" class="dep">&nbsp;</p>
    <p id="dep2" class="dep">&nbsp;</p>
    <p id="dep3" class="dep">&nbsp;</p>
    <p id="dep4" class="dep">&nbsp;</p>
    <p id="dep5" class="dep">&nbsp;</p>
    <p id="dep6" class="dep">&nbsp;</p>
    <p id="dep7" class="dep">&nbsp;</p>
    <p id="dep8" class="dep">&nbsp;</p>
    </div>
    <style><!--
    #dep0{position:absolute; z-index:1; width:10vw; font-size:1.8vw;}
    .dep{position:absolute; z-index:1; width:12vw; height:8vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background-size:cover; transition: margin 1.2s linear 0s, transform 1.2s linear 1.2s, width 1.2s linear 1.2s, height 1.2s linear 0s;}
    #dep1{background:url('http://ekladata.com/SS2l3YykKdagej5cKVgscESXD2Q.jpg'); transform:translate(6vw,0vw); margin: 2.5vw 0;}
    #dep2{background:url('http://ekladata.com/_aVOH-_kDmQDLKMFxG1Po9cS510.jpg'); transform:translate(24vw,0vw); margin: 2.5vw 0;}
    #dep3{background:url('http://ekladata.com/6445buG-3a44pAPvlU7XMgWDpLo.jpg'); transform:translate(42vw,0vw); margin: 2.5vw 0;}
    #dep4{background:url('http://ekladata.com/aQnaVc1xwWlQQyGkaoM8d3t9A7E.jpg'); transform:translate(15vw,0vw); margin: 13vw 0;}
    #dep5{background:url('http://ekladata.com/9gIrA2VMmLuudEWcD0gWSqLCcvk.jpg'); transform:translate(33vw,0vw); margin: 13vw 0;}
    #dep6{background:url('http://ekladata.com/nlV4vQtaqEzbqzo6XvcWwRMtj7Y.jpg'); transform:translate(6vw,0vw); margin: 23.5vw 0;}
    #dep7{background:url('http://ekladata.com/1Hbcv2NXhRh1iX7R4tjGrr35Gok.jpg'); transform:translate(24vw,0vw); margin: 23.5vw 0;}
    #dep8{background:url('http://ekladata.com/xXkmlI4iAc2Pz-3NJRtnyf9Ep7E.jpg'); transform:translate(42vw,0vw); margin: 23.5vw 0;}
    #dep1:hover,#dep2:hover,#dep3:hover,#dep4:hover,#dep5:hover,#dep6:hover,#dep7:hover,#dep8:hover{z-index:5; transform:translate(0vw,0vw); margin:0vw 0vw; width:60vw; height:33.75vw;}
    --></style>