Docs

[Cindy H]

I am trying to add the following effect to my header after hover, however I can’t seem to get it to work.

.x-navbar .desktop .x-nav>li a:after{
content: ”;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}

Can you advise me on how to get this to work?

[Cindy H]

This reply has been marked as private.

[Cindy H]

My client would like to have this sort of hero image/menu transition. Is this possible?

He likes the idea of how this site fades to the menu. http://blog.invisionapp.com/improve-your-design-presentations/

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully the effect in the given url is not using any css. It has a custom JS script that computes the position of the hero image and its opacity. The more your scroll, the image became less visible. Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

[Author]

Posts