-
Hi team,
I would like to recreate an effect similar to this one (role model)
On hover, the image should get a blur effect and text should run up from the bottom.
How can I achieve this?Thank you!
-
Hi Stefanie,
Take the #3 as an example.
1. Select the container .gb-element-a0dd2b11, create a custom selector
.gb-element-a0dd2b11:hover img, and add theblureffect to it.2. Select the container, create a custom selector
.gb-element-a0dd2b11:hover h3, and add transform >translateYeffect to it. -
Thank you Ying!
That almost works.
There are two more things:
1. How can I keep the edges of the container sharp so that the blur effect doesn’t extend beyond the container? I suspect I need to use a before selector for this, but unfortunately I don’t know how to do this exactly.
2. How can I hide the paragraph text? It should only slide up on hover (that works fine). But for the main state, it shouldn’t be visible. I have tried overflow:hidden, but that has no effect.
Thank you very much!!
-
Hi there,
Set the container that wraps both the text and image (gb-element-a0dd2b11) to
overflow-y: hidden. That should fix both issues. -
Hi there,
Set the container that wraps both the text and image (gb-element-a0dd2b11) to
overflow-y: hidden. That should fix both issues. -
That’s it 👍
Thank you, Alvind !!
-
You’re welcome!
- You must be logged in to reply to this topic.