Réaliser un effet de flou en css et svg

9 août 2015 nakama

Intégration

(Cet article a été écrit il y a très longtemps, dans une galaxie très très lointaine)

Allez voir la préview histoire de voir ce que l’on va apprendre à faire.

Mais en gros : on va mettre en place un peu de blur ( flou ) sur une image afin de créer un petit effet sympa.

Le principe

Pour réaliser l’effet, il faut superposer 2 images :

  • 1 normale
  • 1 floutée mais en display none

Ensuite il reste uniquement à mettre un display block sur l’image floutée lors du hover.

On va commencer par le html pour avoir une structure simple et solide

Ici, les lignes les plus importantes sont la 10 et 11, le restant sert uniquement à mettre en forme notre exemple.

On continue avec le svg qui sera utilisé avec notre class maskblur

Un peu de css pour mieux comprendre

Maintenant, dès que vous passez sur l’image au hover, la deuxième image ( floutée ) sera utilisée.

L’inconvénient est d’utiliser 2 images et de passer de l’une à l’autre, mais le rendu final est là.

Pour la préview, j’ai réalisé le blur dans un cas concret afin d’avoir une meilleure compréhension des possibilités.

Mots-clés associés à cet article :

Retrouvez d'autres articles par catégories

sed dapibus venenatis diam accumsan consequat. risus luctus quis