• Exemple 220

    Etant droitier, j'ai tendance à placer les vignettes à survoler à droite mais je crois, qu'avec de grandes images, l'animation avec un fond qui reste fixe, les images tremblent, le programme ayant beaucoup de paramètres à modifier; essayons avec des vignettes à gauche et collées au bord gauche.

    Exemple avec 1+6 images en 1000px par 563px; je vais publier un article, selon le même code mais en 1600px par 900px et voir ce que ça donne question tremblement.

    Survol

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/g7BUl4mnErrAkIBGYSW163RnCqc.jpg'); background-size: cover;">

    <p id="gch0">Survol</p>

    <p id="gch1" class="gch">&nbsp;</p>

    <p id="gch2" class="gch">&nbsp;</p>

    <p id="gch3" class="gch">&nbsp;</p>

    <p id="gch4" class="gch">&nbsp;</p>

    <p id="gch5" class="gch">&nbsp;</p>

    <p id="gch6" class="gch">&nbsp;</p>

    </div>

     

    <style><!--

    #gch0{position:absolute; z-index:1; width:120px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(700px,10px);}

    .gch{position:absolute; z-index:1; width:30px; height:60px; border:2px solid white; filter:grayscale(1); transition: width 1s linear 0s, background 1s linear 1s, height 1s linear 1s, margin 1s linear 1s, filter 1s linear 2s;} 

    #gch1{box-sizing:border-box; background:url('http://ekladata.com/PwxXtgyZUkU_-M39ShFhruMYe5I.jpg'); background-size:1000px 563px; background-position:0px -10px; margin: 10px 0 0 0;}

    #gch2{box-sizing:border-box; background:url('http://ekladata.com/rP4AXxKEe4Jt63QJO3gD5A2P4g0.jpg'); background-size:1000px 563px; background-position:0px -100px; margin: 100px 0 0 0;}

    #gch3{box-sizing:border-box; background:url('http://ekladata.com/N8sz0RL2DOGmegQzyFOoP0Ubj24.jpg'); background-size:1000px 563px; background-position:0px -190px; margin: 190px 0 0 0;}

    #gch4{box-sizing:border-box; background:url('http://ekladata.com/9fGQ1XeJGQQXHZ3itDrdDw-hVlA.jpg'); background-size:1000px 563px; background-position:0px -280px; margin: 280px 0 0 0;}

    #gch5{box-sizing:border-box; background:url('http://ekladata.com/ZP3ySS3CG__o7zf9yiVR2ygJ8Js.jpg'); background-size:1000px 563px; background-position:0px -370px; margin: 370px 0 0 0;}

    #gch6{box-sizing:border-box; background:url('http://ekladata.com/IIQRONAB0OUXh7q0h7elo2cGKEU.jpg'); background-size:1000px 563px; background-position:0px -460px; margin: 460px 0 0 0;}

    #gch1:hover,#gch2:hover,#gch3:hover,#gch4:hover,#gch5:hover,#gch6:hover{z-index:5; width:1000px; height:563px; margin:0px; background-position:0px 0px;  filter:grayscale(0);}

    --></style>