— Publié le 25 août 2018 —
Pour animer un peu vos sites web, nous allons vous montrer comment faire des effets sur vos images à l’aide des filtres en CSS3.
- grayscale : niveau de gris
- sepia : effet sépia
- blur : effet de flou
- drop-shadow : ombre portée
- saturate : saturation
- hue-rotate : teinte
- invert : effet négatif
- opacity : opacité
- brightness : luminosité
- contrast : contraste
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 %.
Code HTML
Code CSS
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 (sepia). On peut aussi l’exprimer en %.
Code HTML
Code CSS
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’exprime en pixel, plus le chiffre est élevé, plus l’image est floue.
Code HTML
Code CSS
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.
Code HTML
Code CSS
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.
Code HTML
Code CSS
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.
Code HTML
Code CSS
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 %.
Code HTML
Code CSS
Opacity
Nous appliquons une opacité à l’image originale. La valeur s’exprime en %. Avec 0%, l’image est totalement transparente, à 100%, elle est normale.
Code HTML
Code CSS
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.
Code HTML
Code CSS
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.
Code HTML
Code CSS
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. Face à la popularité de cette article, nous vous en proposons un autre avec de nouveaux effets grâce aux transformations : Appliquer des transformations à des images en css3.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !
merci <3
Merci pour ce rappel !!
bonjour je n’arrive pas à appliquer vos filtres pouvez-vous m’aider stp?
Bonjour,
Je peux essayer… Il me faudrait l’URL de la page en m’expliquant sur quelle image vous souhaitez appliquer le filtre.
Bonjour
L’effet de vos filtres est spectaculaire.
J’ai travaillé sur une image Illustrator sauvegardée en svg et j’anime des boutons « calques » au survol de la souris.
Hélas, trois fois hélas ils ne fonctionnent qu’avec Firefox (Mac et PC), sur les autres navigateurs rien ne bouge.
Est-ce la triste limite de ces calques ?
Bien cordialement
Bonjour,
Ces filtres CSS3 sont normalement compatibles avec la plupart de navigateurs, vous pouvez le voir ici : https://caniuse.com/css-filters
Bonjour,
il y a une erreur sur le code sipa, c’est le copier coller du Grayscale, en changent le nom du filtre grayscale par sepia ça marche mieux
merci pour la démo
Merci Jean-Brice pour votre vigilance, le texte d’intro est corrigé.
Je crois que l’exemple du drop-shadow ne marche pas.
Merci Benoit, c’est corrigé !
Bonjour,
Comment faire pour mettre ma photo en noir et blanc ?
Merci d’avance
Bonjour Romane,
Selon le but souhaité, le plus simple est de passer votre photo en N&B avec Gimp ou Photoshop ou tout autre outil de traitement d’image. En CSS, vous pouvez utiliser le code contenu dans le paragraphe Grayscale.
comment ajouté un texte au centre par exemple pour mener vers un lien, exemple :
une image d’un vase et au :hover un petit message apparaît « Voir les infos »
Bonjour Marwane,
vous trouverez ce tuto dans cet autre article : https://yesyouweb.com/html-texte-sur-une-image-et-hover/