Les effets

jdb-opacity

Les effets visuels

JdB.CSS propose plusieurs classes d'effets pour modifier l'apparence visuelle des éléments. Ces effets peuvent être appliqués aux images, aux conteneurs et à tout autre élément HTML.

Opacité

Les classes d'opacité permettent de contrôler la transparence d'un élément. La classe jdb-opacity applique une opacité de 60%, tandis que jdb-opacity-min et jdb-opacity-max offrent des variantes.

Normal
jdb-opacity-min
jdb-opacity
jdb-opacity-max

Code :

<img src="image.jpg" class="jdb-opacity-min" alt="Opacité minimale">
<img src="image.jpg" class="jdb-opacity" alt="Opacité normale">
<img src="image.jpg" class="jdb-opacity-max" alt="Opacité maximale">

Niveaux de gris (Grayscale)

La classe jdb-grayscale (ou jdb-greyscale) convertit une image en niveaux de gris. Vous pouvez contrôler l'intensité avec les variantes -min et -max.

Normal
jdb-grayscale-min
jdb-grayscale
jdb-grayscale-max

Code :

<img src="image.jpg" class="jdb-grayscale-min" alt="Niveaux de gris minimal">
<img src="image.jpg" class="jdb-grayscale" alt="Niveaux de gris">
<img src="image.jpg" class="jdb-grayscale-max" alt="Niveaux de gris complet">

Effet sépia

L'effet sépia donne à vos images un aspect vintage ou ancien. Utilisez jdb-sepia pour appliquer cet effet, avec les variantes -min et -max pour contrôler l'intensité.

Normal
jdb-sepia-min
jdb-sepia
jdb-sepia-max

Code :

<img src="image.jpg" class="jdb-sepia-min" alt="Sépia léger">
<img src="image.jpg" class="jdb-sepia" alt="Sépia">
<img src="image.jpg" class="jdb-sepia-max" alt="Sépia intense">

Effet de flou

Les classes de flou permettent d'appliquer un effet de flou gaussien. jdb-blur applique un flou moyen, tandis que jdb-blur-min et jdb-blur-max offrent des intensités différentes.

Normal
jdb-blur-min
jdb-blur-max

Code :

<img src="image.jpg" class="jdb-blur-min" alt="Flou léger">
<img src="image.jpg" class="jdb-blur" alt="Flou moyen">
<img src="image.jpg" class="jdb-blur-max" alt="Flou intense">

Effets de survol

Vous pouvez combiner les effets avec les classes de survol pour créer des interactions dynamiques. Survolez les images ci-dessous pour voir l'effet.

Opacité au survol

La classe jdb-hover-opacity-off supprime l'opacité au survol, révélant l'image complète.

jdb-opacity jdb-hover-opacity-off
jdb-opacity (sans hover)
Normal (pour comparaison)

Code :

<img src="image.jpg" class="jdb-opacity jdb-hover-opacity-off" alt="Révèle au survol">

Niveaux de gris au survol

Utilisez jdb-hover-grayscale pour appliquer un effet de niveaux de gris uniquement au survol.

jdb-hover-grayscale
jdb-grayscale (permanent)
Normal

Code :

<img src="image.jpg" class="jdb-hover-grayscale" alt="Niveaux de gris au survol">

Sépia au survol

La classe jdb-hover-sepia applique l'effet sépia au survol du curseur.

jdb-hover-sepia
jdb-sepia (permanent)
Normal

Code :

<img src="image.jpg" class="jdb-hover-sepia" alt="Sépia au survol">

Suppression du flou au survol

Utilisez jdb-hover-blur-off pour supprimer l'effet de flou au survol.

jdb-blur jdb-hover-blur-off
jdb-blur (permanent)
Normal

Code :

<img src="image.jpg" class="jdb-blur jdb-hover-blur-off" alt="Netteté au survol">

Combinaison d'effets

Vous pouvez combiner plusieurs effets pour créer des styles uniques. Par exemple, opacité avec niveaux de gris, ou sépia avec flou.

jdb-opacity jdb-grayscale
jdb-sepia jdb-opacity-min
jdb-grayscale jdb-opacity jdb-hover-opacity-off

Code :

<img src="image.jpg" class="jdb-opacity jdb-grayscale" alt="Combinaison">
<img src="image.jpg" class="jdb-sepia jdb-opacity-min" alt="Combinaison">
<img src="image.jpg" class="jdb-grayscale jdb-opacity jdb-hover-opacity-off" alt="Hover combiné">

Ces effets utilisent les propriétés CSS opacity et filter. Ils sont compatibles avec tous les navigateurs modernes.