Archived topic
Make button appear only on column hover
5 replies · Started by Arie on January 8, 2022
Hello, trying to wrap my head around implementing this effect with Generate Press where the button only shows on column hover. Is this possible natively with Generate Press or is some custom CSS neeeded?
Hi there,
the Theme doesn't do stuff like that - as that is content.
How are you constructing the columns and buttons ?
Using Generate Press Pro, Generate Blocks Pro. Built it using column/grid, just not sure how to go about having the button only show on hover. Here is link to staging site: https://wordpress-391606-2369073.cloudwaysapps.com/
In GenerateBlocks Pro - there is the Effects panel.
Which allows you to do stuff like that.
Try:
1. Select the button that you want hidden and go to Advanced > Additional CSS Class(es) and add a custom class eg.
hidden-until-hover
2. Select the Container Block the button is in and:
2.1 In Effects select the Opacity and Blend and 2 x new effects there
https://www.screencast.com/t/wjSX99CBRnG
You can see the first effect state is Normal and the Target is Custom Selector that i have added our custom seletor (with the period) .hidden-until-hover to the field. And i have reduced the Opacity,
The second one is the same except the State is set to Hover and i have increased the opacity.
Ok, getting closer, but not quite the effect shown in the example image.
This leaves a big white space where the button is when not hovering. In the example image there is no space where the button is on hover, it only shows up when the box is being hovered on...Any tips on how to get closer to the example image?
It may require some Custom CSS. But you can try experimenting with other Effects ( you can add as many as you like ). So you could do the same kind of thing above but wioth the Transform options to Scale the button size.
