Truco para ocultar spoilers en tu página web [CSS]

Cuando se trata de spoilers existen dos tipos de lectores: aquellos que se apasionan por enterarse de lo que está a punto de ocurrir, y los que prefieren mantenerse en constante suspenso. Independientemente del tipo de lector que prefieras ser, lo cierto es que sería conveniente incluir una opción para ocultar los spoilers en tu página web para no arruinarle la fiesta a otros usuarios.

Personalmente me declaro en total desacuerdo con los usuarios que utilizan los

spoilers para arruinarte el banquete. Es como ver una película con una persona que te anticipa lo que está a punto de suceder. Por lo tanto, siempre prefiero un sutil aviso que advierta el contenido de spoilers.

Una interesante alternativa para ocular los spoilers que otros usuarios comentan en un post es añadiendo un sencillo efecto blur donde se indique claramente las advertencias correspondientes. Para ello recurriremos a los filtros CSS digitando el siguiente código:

.spoiler {
-webkit-filter: blur(20px);
-webkit-transition-property: -webkit-filter;
-webkit-transition-duration: .4s;
}
.spoiler:hover, .spoiler:focus {
-webkit-filter: blur(0px);
}

¡Listo! Con este sencillo esquema podrás incluir en tus post una opción para ocultar o expandir el contenido de un spoiler. Para ver una demostración del resultado final haz clic aquí:

Ver | Demostración  ~ Vía | David Walsh Blog [post_ad]