• Rotation images

    Vous rencontrez, sur certains blogs, des images qui sont inclinées et qui se redressent au survol ou d'autres, qui ont des angles arrondis, qui deviennent droits au survol.

    La plupart du temps, ce réglage est entré dans le CSS du blog et agit sur toutes les images du blog; je ne suis pas partisan de ces réglages figés, qui deviennent routiniers et plus agaçants qu'autre chose.

    Par contre, sur chaque article, vous pouvez donner une animation à vos images ou à vos textes, en variant d'un article à l'autre.

    Commençons par une image inclinée qui se redresse au survol, avec une ombre: image de 600x338px; rapport 16/9.

    code:
    <p><img id="c1" src="http://ekladata.com/L4d884dwV5UTVICp6aJlHv-N2jg.jpg" alt="" /></p>
    <style><!--
    #c1{transform:translate(50px,70px) rotate(-20deg); transform-origin:center center; border:4px ridge white; transition:all 1s linear; box-shadow:0px 0px 0px grey;}
    #c1:hover{transform:translate(50px,70px) rotate(0deg); box-shadow:0px 0px 8px 5px grey;}
    --></style>

    Si vous placez plusieurs images avec la même animation, dans un article, vous pouvez définir une classe pour vos images tout en les identifiant individuellement.

    <p><img id="c2" class="el" src="http://ekladata.com/jUkHFG16UPTi-rrLbUOHeZuLWFU.jpg" alt="" /></p>
    <p><img id="c3" class="el" src="http://ekladata.com/gV9mBulq_CW5z_g0TKdRjp2O32Y.jpg" alt="" /></p>
    <style><!--
    .el{width:300px; height:170px; transform:rotate(20deg);transform-origin:center center; border:4px ridge white; transition:all 1s linear; box-shadow:0px 0px 0px grey;}
    #c2{transform:translate(450px,70px) rotate(20deg);}
    #c3{transform:translate(450px,120px) rotate(20deg);}
    #c2:hover{width:600px; height:338px; transform:translate(450px,70px) rotate(0deg); box-shadow:0px 0px 8px 5px coral;}
    #c3:hover{width:600px; height:338px; transform:translate(450px,70px) rotate(0deg); box-shadow:0px 0px 8px 5px lime;}
    --></style>
    En plus de la rotation, nous avons un changement de taille, au survol.

    Le même principe peut-être appliqué à un changement de forme: exemple: angles arrondis qui deviennent droit, au survol

    <p><img id="c4" src="http://ekladata.com/b6hHUpKioJRkkR4EwlV-m2jgC-A.jpg" alt="" /></p>
    <style><!--
    #c4{transition:all 1s linear; transform:translate(550px,70px); width:600px; height:338px; border-radius:150px; box-shadow:0px 0px 0px 0px white; border:3px solid black;}
    #c4:hover{border-radius:0px; box-shadow:0px 0px 15px 15px white;}
    --></style>

     

    Bien d'autres animations sont possibles...