Tutorial Astra: Cómo atenuar el contenido al pasar el cursor por el menú

¿Te gustaría que cuando un visitante pase el cursor para ver tus menús se atenuase el resto de la web?

Me refiero a este efecto…

Pues este efecto tan interesante para centrar la visualización del visitante en tu menú es muy fácil de hacer, y aunque el tema Astra no lo incorpora como ajuste en sus opciones, puedes añadirlo a tu arsenal de personalizaciones para Astra.

Solo tienes que añadir un poquito de código en la sección «CSS adicional» del personalizador de WordPress, este:

/* Difuminar contenido al pasar el cursor sobre un menu */
#masthead:hover~#content {
	opacity: 0.1;
	transition: all 0.5s linear 0.1s;
}

#content {
	transition: all 0.5s linear 0.1s;
}

Por supuesto, puedes personalizar el nivel de opacidad a tu gusto (opacity).

Espero que te haya gustado este truco exprés para el tema Astra.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!