- This topic has 9 replies, 3 voices, and was last updated 4 years, 7 months ago by
.
-
Posts
-
Hello everyone! 🙂
Could you please help me to implement the following:
I want the site name to disappear when hovering over in the logo area (main-title), but its description (site-description) is shown.Something similar was done in Niche, when you hover over the product card, the price disappears, but the add to cart button appears.
Customer Support
Hi there,
Assuming you’re using the default structure, you can try this CSS:
.site-logo:hover + .site-branding .main-title { display: none; }I want to make animation like here:
https://gpsites.co/niche/shop/Namely, like this:
https://prnt.sc/1qfjjip
https://prnt.sc/1qfjkdbCustomer Support
Hi there,
can you share a link to your site where the Site Title and Description are both being displayed and i can see what is possible.
No problem 🙂
Give this CSS a shot:
.site-branding-container:hover .main-title, .site-branding-container .site-description { opacity: 0; overflow: hidden; transition: all 0.3s ease-in; } .site-branding-container:hover .site-description { transform: translate3d(0,-100%,0); opacity: 1; }Exactly what is needed! Thanks David 😉
But there is one BUT: is it possible to make the description clickable?Add this CSS to make the entire container clickable:
.site-branding-container { position: relative; } .main-title a:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .site-description { pointer-events: none; }David, you are the coolest!
Thank you very much, this is what need me 🙂Glad to be of help
- You must be logged in to reply to this topic.
