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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.7 / 5. Total de votos: 12

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

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

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido