Streaming live at 10am (PST)

Text reveal over an image

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…

I’m struggling!

Thanks

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?

I see the attached when I hover…

G

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: https://university.webflow.com/courses/grid

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.

That’s absolutely perfect!!! :blush:

Pleeeeease can you tell me how you did it…

A bullet list would be lovely.

Cheers

G

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

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

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:

Hope that helps!

1 Like

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.