Archived topic
How to auto hide buttons and unhide when hover
7 replies · Started by Jeroen on February 14, 2022
Hello,
I like to implement like in the Broadcast template (https://gpsites.co/broadcast/) the 'read more' buttons to be invisible unless one hovers over the container. As these blocks in the Broadcast template are implemented using a widget and based on auto-generation and blog posts I am unable to copy how this is done from the broadcast template. In the template it shows one button per container however I like to be able to use multiple buttons to appear when hovering over the container.
On this site there is a suggestion of html and css code to use but I'm unsure if and how I can use this code in Generate Press.
Help to implement this using self made containers and buttons is appreciated.
Hi there,
can you share a link to your site where i can see your posts with the read more buttons ? I can then provide some CSS specific to your site.
Oke, see private information.
First thing is to add some CSS Classes to the blocks. Which you can do by selecting a Block and going to Advance > Additional CSS Class(es).
First select the parent Container Block ( ie. the one that wraps around the individual card ), and give that a class of: has-hidden-button
Second selection the Buttons Block that needs to be hidden and give that a CSS Class of: is-hidden-button
Can you add them, then i can take a look :)
Oke. I did add the CSS classes to the containers and buttons.
Try adding this CSS:
.has-hidden-button .is-hidden-button {
opacity: 0;
}
.has-hidden-button:hover .is-hidden-button {
opacity: 1;
}Great, it works! Thank you for the support David.
Glad to be of help
