Créer une balise de censure/trigger

Présentation

Je suis un potentiel trigger

Installation  

Balise pour texte
Pour se faire, il faut créer une balise personnalisée, comme : <tw>je suis un trigger</tw> (tw pour trigger).

Puis, rien de plus simple que ajouter en CSS :

Code:

tw {
  filter: blur(3px); /* floutage */
  transition: filter .3s; /* transition progressive */
}
/* Retire le floutage au survol */
tw:hover {
  filter: none;
}

Balise pour image
Pour une image, optons cette fois pour une class .tw à ajouter à la balise image. Ce qui donnerait <img class="tw" src="image.png"/>

CSS :

Code:

img.tw {
  filter: blur(10px); /* floutage */
  clip-path: inset(0);
  transition: filter .3s; /* transition progressive */
}
/* Retire le floutage au survol */
.tw:hover {
  filter: none;
}

Optimisation
Encore mieux, vous pouvez condenser le CSS pour le texte et l'image ainsi :

Code:

/* Censure texte*/
tw {
  filter: blur(3px);
  transition: filter .3s;
}
/* Censure image */
img.tw {
  filter: blur(10px);
  clip-path: inset(0);
  transition: filter .3s;
}
/* Retire le floutage au survol */
tw:hover, .tw:hover {
  filter: none;
}