Astra Theme Tutorial: How to attenuate the content when hover the cursor over the menu

Would you like the rest of the site to be softened when a visitor hover the cursor over your menus?

I mean this effect…

This interesting effect to focus the visitor’s display on your menu is very easy to do, and although the Astra theme does not incorporate it as an option setting, you can add it to your arsenal of customizations for Astra.

Just add a little bit of code in the “Additional CSS” section of the WordPress customizer:

/* Attenuate the content when passing the cursor through the menu */
#masthead:hover~#content {
 opacity: 0.1;
 transition: all 0.5s linear 0.1s;
}
 
#content {
 transition: all 0.5s linear 0.1s;
}Code language: CSS (css)

Of course, you can customize the level of opacity to your liking.

I hope you liked this quick trick for the Astra theme.

Read this post in Spanish: Tutorial Astra: Cómo atenuar el contenido al pasar el cursor por el menú