Appliquer des filtres à des images en CSS3

Appliquer des filtres à des images en CSS3

Publié le 23 avril 2016

Nous allons vous montrer comment faire des effets sur vos images à l’aide des filtres en CSS 3.

Vérifiez la compatibilité de cette fonctionnalité avec les navigateurs : can I use css filter

Grayscale

L’image utilisée est une image en couleur sur laquelle on applique un filtre « noir & blanc ». Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise  entre 0 (image originale) et 1 (noir et blanc). On peut aussi l’exprimer en %.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-gris”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-gris img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
.photo-gris img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}

Sepia

L’image utilisée est une image en couleur sur laquelle on applique un filtre « sépia ». Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise  entre 0 (image originale) et 1 (noir et blanc). On peut aussi l’exprimer en %.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-sepia”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-sepia img {
filter: sepia(1);
-webkit-filter: sepia(1);
}
.photo-sepia img:hover {
filter: sepia(0);
-webkit-filter: sepia(0);
}

Blur

Ici, nous utilisons une photo nette sur laquelle on applique un filtre flou. Ce filtre se retire quand on survole l’image. La valeur du filtre s’expime en pixel, plus le chiffre est élevé, plus l’image est floue.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-blur”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-blur img {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.photo-blur img:hover {
filter: blur(0);
-webkit-filter: blur(0);
}

Drop-shadow

Avec Drop-Shadow, nous ajoutons une ombre portée autour de l’image quand on la survole. Toutes les valeurs s’expriment en pixels. Les offset-x et offset-y sont obligatoires, le blur-radius, spread-radius et la couleur sont optionnels.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-drop-shadow”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-drop-shadow img:hover {
filter: drop-shadow(5px 5px 10px black);
-webkit-filter: drop-shadow(5px 5px 10px black);
}

Saturate

La saturation initiale est 100%. Pour sur-saturer une image, on augmente ce %. Nous l’avons fortement augmenté afin que vous voyiez bien la différence. L’image est à nouveau normale au survol.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-saturate”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-saturate img {
filter: saturate(600%);
-webkit-filter: saturate(600%);
}
.photo-saturate img:hover {
filter: saturate(100%);
-webkit-filter: saturate(100%);
}

Hue-rotate

Ici, nous jouons sur la couleur de l’image en utilisant une palette de 0 (image originale) à 360 degrés ((image originale). Testez la valeur qui vous convient, nous avons choisi 120 degrés.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-hue-rotate”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-hue-rotate img {
filter: hue-rotate(120deg);
-webkit-filter: hue-rotate(120deg);
}
.photo-hue-rotate img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
}

Invert

Avec Invert, l’image ressemble à une photo en négatif, la photo originale se retrouve quand on la survole. La valeur du filtre est comprise  entre 0 (image originale) et 1 (inversion totale). On peut aussi l’exprimer en %.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-invert”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-invert img {
filter: invert(1);
-webkit-filter: invert(1);
}
.photo-invert img:hover {
filter: invert(0);
-webkit-filter: invert(0);
}

Opacity

Nous appliquons une opacité à l’image originale. La valeur s’exprime en %. Avec 0%, l’image est totalement transparente, à 100%, elle est normale.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-opacity”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-opacity img {
filter: opacity(50%);
-webkit-filter: opacity(50%);
}
.photo-opacity img:hover {
filter: opacity(100%);
-webkit-filter: opacity(100%);
}

Brightness

Ici, nous jouons avec la luminosité de l’image.  La valeur s’exprime en % ou en valeur décimale. Avec 0, nous avons l’image originale, à 100%, l’image a une luminosité totale.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-brightness”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-brightness img {
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
.photo-brightness img:hover {
filter: brightness(100%);
-webkit-filter: brightness(100%);
}

Contrast

Le contraste est le ratio entre les couleurs claires et les couleurs foncées.  La valeur s’exprime en % ou en valeur décimale. Avec 1, nous avons l’image originale, avec 0, l’image sera complètement noire.

Filtres CSS - Yes You Web

Code HTML

<div class=“photo-contrast”>
<img src=“images/effet.jpg” />
</div>

Code CSS 

.photo-contrast img {
filter: contrast(50%);
-webkit-filter: contrast(50%);
}
.photo-contrast img:hover {
filter: contrast(100%);
-webkit-filter: contrast(100%);
}

Conclusion

Afin que l’effet quand vous survolez l’image ne soit pas trop « violent », vous pouvez ajouter une transition sur l’image.
Nous espérons que cet article vous aura été utile. S’il vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. N’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*