Archived topic
Hide site name but show description on hover
9 replies · Started by Mihail on August 22, 2021
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.
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/1qfjkdb
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
