-
I’ve been following this https://docs.generateblocks.com/article/overlay-effect-on-hover/ as really it’s exactly what I would like to replicate.
Things have changed a little looking at your article as the Transform effect doesn’t have the same options.
I created a new Global Style and added a new selector: &:hover .overlay and added Transform effects there.
I’m not sure how to make it responsive and also how to guarantee that all the text will be visible when on hover – no matter if on Desktop, Tablet, Mobile.
What I have done so far is on the page linked in Private information. It’s the section right at the end of the page, but just before the footer ‘My research is supported by:’
Many thanks for any pointers.
-
Hi there,
Just wanted to confirm: do you also want the hover effect to apply on tablet and mobile?
On touch devices, users would need to tap the element to trigger the interaction rather than hover over it as they would on desktop. I just want to understand how you’d like the interaction to behave on those breakpoints.
-
Yes please… if users tap the element to trigger interaction for tablet/mobile. Thank you for your help.
Best wishes, Lindsay
-
Hi Lindsay,
1. Add a transition to
.overlay, instead of.gbp-overlay-spk:hover .overlay.2. Set the 3 containers’
min-heighttofit-content.3. For
.gbp-overlay-spk .overlay, settransformtotranslate3d(0, 100%, 0).4. For
.gbp-overlay-spk:hover .overlay, settransformtotranslate3d(0, 0, 0). -
Many thanks….
How do I now account for different lengths of text? The first image has more text so makes the box longer – I’ve tried to work this out but I’m failing.
And likewise in tablet how do I change from three in a row to two. I’ve changed the width % to 50 on the three containers and the flex direction to column on the top container – the 50% is fine but they are in a single column not side by side. Sorry, I’m sure it’s obvious but I’m just not seeing it.
Best wishes, Lindsay
-
1. Set each of the 3 containers’
min-heightto100%, and remove100%from theheightfield, and also set theirpositiontorelative.2. Select each of the titles, set
positionto absolute,inset>leftto0,inset>rightto0,inset>topto0. -
Thank you so much. I’d never have got there. Excellent support.
Finally then it’s just trying to get two of the images to sit side by side in tablet view – at the moment they are 50% wide but sit in one column? I’ve set the Flex layout to column on the top container, otherwise it squeezes all on one line.
When I add a fourth in, although each container is set at 33.3% width for desktop, it adds it to the end. Not sure how to correct this either. I don’t know if I should be using Grid Template Columns but this doesn’t appear to do anything.
Thank you again for your help.
-
Hi Lindsay,
I would do this in Tablet view:
Set the wrapper Container
gb-element-5856b257from Flex to Display: Grid, then set Grid Template Columns to:repeat(2, minmax(0, 1fr))Then, set the Width of each individual column to
100%. -
Thanks, that’s all really helpful. Not sure I would have got there without your support.
I can’t seem to make the containers equal height in the different rows https://share.google/C3eoPL8U7NFtgR5mp, but from what I’ve read it may be because I’ve got another inner container – which I need for the hover effect. So I entered a fixed pixel height. Unless you’ve any ideas, happy to leave as this.
Thank you again. Brilliant support.
-
I can’t seem to make the containers equal height in the different rows
It is normal behaviour. You can not really make containers on different rows the same height, unless you add a static
min-heightvalue for all of them, eg.700px. -
Thank you for that information. Best wishes, Lindsay
-
Thanks!
You are welcome 🙂
- You must be logged in to reply to this topic.