Comment flouter une image en HTML et CSS ?
Je cherche à créer un genre de spoiler où par défaut une image est floutée, sauf lorsqu'on passe la souris sur l'image. Merci.
Pour flouter une image HTML, vous pouvez utiliser la propriété CSS FILTER avec la fonction BLUR.
Dans l'exemple ci-dessous une crée une CLASS CSS pour flouter l'image avec la propriété FILTER et sa fonction BLUR. La fonction BLUR contient un argument exprimé en pixel ; il correspond à la taille de l'effet de floutage autour et sur l'image.
La pseudo-classe CSS :hover est utilisée pour supprimer l'effet de floutage lorsque le curseur de la souris survole l'image; pour cela on donne la valeur 0 pixel à l'argument de la fonction BLUR.
transition-property et transition-duration permettent de contrôler la vitesse de l'animation lorsqu'on passe d'une image floutée à une image non floutée, et vis et versa.
Voici un exemple d'image qui est par défaut floutée, sauf lorsqu'on survole l'image:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment flouter une image en HTML et CSS ?</title>
<style>
.spoiler_flou {
filter: blur(10px);
transition-property: -webkit-filter;
transition-duration: .5s;
}
.spoiler_flou:hover, .spoiler_flou:focus {
filter: blur(0px);
}
</style>
</head>
<body>
<img src="https://www.collaborativejob.com/images/pub/welcome-reset.jpg" class="spoiler_flou" alt="Image floutée" style="width:200px">
</body>
</html>
Démo dans le Bac à code.