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.1formatik.fr/images/pub/welcome-reset.jpg" class="spoiler_flou" alt="Image floutée" style="width:200px">
</body>
</html>
Démo dans le Bac à code.
