web-dev-qa-db-fra.com

comment rendre les niveaux de gris fluides en survol en utilisant CSS

J'ai un logo sur mon site Web, il est en niveaux de gris en survol, je veux qu'il soit coloré en douceur. cela fonctionne mais pas en douceur. j'utilise la transition CSS.

C'est mon code

<img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />

   <style>
    img.tt-logo {
      filter: grayscale(1);
      transition: grayscale 0.5s;
    }

    img.tt-logo:hover {
      filter: grayscale(0);
    }
   </style>
csscss-transitionsgrayscale
9
Maria

Essayez de le faire de cette façon:

 img.tt-logo {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img.tt-logo:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

et chaque image a son propre alt, vous pouvez l'utiliser sans utiliser img.class:

 img[alt="TT ltd logo"] {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
 }

 img[alt="TT ltd logo"]:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

dans ce cas class est extra

15
Igor Ivancha

L'animation d'un filtre nécessite beaucoup de calculs et peut nuire aux performances de certains navigateurs.

Vous pouvez obtenir de meilleures performances en animant le opacity d'une image en niveaux de gris pour révéler une image en couleur en dessous.

Voici un exemple.

6
Rafi