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.

La entrada Tutorial Astra: Cómo atenuar el contenido al pasar el cursor por el menú la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *