Text reveal over an image

Design help Animations & Interactions
1

Hello

I need to replicate this effect of text reveal over an image, however I need the images to be responsive and fill across the page, exactly as this site does…

https://www.khurumakhan.com/

I’m struggling!

Thanks

2

Hey Graham!

Just so I’m sure we’re looking at the same thing, I’ve recorded a video of how that website looks on my end.

I’m not seeing any text reveal effects - but I can see how each category title “Wedding Photography”, “Lifestyle”, etc is affixed to the bottom of each image. Is that the effect you’re looking to achieve?

3

I see the attached when I hover…

G

1770×885 724 KB

4

Hi Graham,

In regards to the layout you want to achieve (what you attached), you can use Grid to build that! If you want to learn how to use Grid, I recommend checking out Webflow’s tutorial series on the subject matter here: CSS grid in Webflow | Webflow University

In regards to the overlay effect, you can accomplish that any number of ways: using interactions, using the “Hover” effect in the Style Panel itself, etc. I chose the interactions method and have rebuilt this effect here for you to check out: https://preview.webflow.com/preview/overlay-with-text?utm_source=overlay-with-text&preview=f16e7316bfdf103498afa66cccb45d29&mode=preview

The published link is here: overlay-with-text.webflow.io

Hope that helps get you started! Write back if you have any questions about the interaction.

5

That’s absolutely perfect!!! :blush:

Pleeeeease can you tell me how you did it…

A bullet list would be lovely.

Cheers

G

6

Hey Graham,

Sure! However, I’d highly recommend checking out the read-only link to ensure you get every detail.

  • Created a wrapper div just to wrap everything (100% width, 100vh height) - not required

  • Created a div called flex to neatly arrange my columns (see Webflow RO link for details on arrangement)

  • Created a div called column with a width of 33.3% (100%/3) and pasted it into the flex div three times total. (3 columns) Note that this is set to be Relative

  • Gave a combo class of 2 and 3 to Columns 2 and 3 respectively. I did this so that I can change the background image of each column

  • Inside each column element, I created another div called overlay that fills the column completely by setting the position to absolute

  • The interaction is created in the interactions panel in two parts: Show Overlay and Hide Overlay. Show Overlay is used on the HOVER IN, Hide Overlay is used on the HOVER OUT.

Please check the read-only link to see how the interaction is built and let me know if you have questions about it.

1 Like
7

Hi

Thanks for your help on this.

I’m nearly there, however I would ideally like the images to reduce in height and width at the same time, rather than start to overlap, as the window reduces. Is this possible?

Thanks

Graham

8

Hey Graham —

Most definitely with Interactions 2.0! When you’re messing around with Interactions, you’ll see that you have a “Size” property (under Miscellaneous). You can use this to animate each column / image to be the height and width of your liking. See below:

image
image1920×1080 682 KB

Hope that helps!

1 Like
9

Hi! Is this possible to do without flex, and with the images stacked vertically on top of each other as opposed to horizontally? I think I replicated everything, but with the layout display set to “box” instead of “flex”, but the hover effect is not quite working.