Streaming live at 10am (PST)

Need help creating text on images BUT with effects

OK, now I’ve been browsing the forum and following some recommendation similar to what I would like to achieve. Basically i’m trying to achieve the design in the GIF (this is not my design just a website that has the same exact design I want to achieve).

  • Section divided in 2 columns each with their own image (so far OK)
  • A text on each column image WOMEN on the left and MEN on the right (so far OK)
  • When hovering on either image, image blurs and gray scale BUT the text WOMEN or MEN respectively DO NOT blur
  • When hovering on either image, a further list drops down

INSPO

I’ve created separate div block for text and images but the effect always effect the text as well (not desired). Can someone guide men with screenshots of how to achieve the design in the GIF I’m really struggling and have been trying for weeks now :’(

here is my readonly webflow

https://preview.webflow.com/preview/dsgnr-empty?utm_medium=preview_link&utm_source=designer&utm_content=dsgnr-empty&preview=b877cfe167b705d857b098d128c5a142&mode=preview

This is pretty doable with interactions.
Let’s make a simplified start that you can work out from!

Make a div that’ll wrap the entire shebang, then insert the desired image and two text fields.
One is the title that’ll always show, the other is the list or links or whatever that you’d like to appear when hovering.
2020-05-24 17_57_07-Webflow - PressFire.no

Make the wrapper Relative.
2020-05-24 17_56_38-Webflow - PressFire.no

Make the title text field Absolute and set it to “full”.
Align it 40% from the top and 60% from the bottom.
2020-05-24 18_01_05-Webflow - PressFire.no
2020-05-24 18_56_53-Sendte elementer - erikf@pressfire.no - Outlook

Align the text to mid
2020-05-24 18_00_57-Webflow - PressFire.no

Result - an image with the title slightly above the middle point.

Do the same with the appearing text field, but align it 50% from the top and 50% from the bottom.
2020-05-24 17_59_38-Webflow - PressFire.no

Result - an image with the title slightly above, and some text under it.

Make the appearing-text field 0% opacity. This is important.
2020-05-24 18_09_48-Webflow - PressFire.no

Result - an image with the title slightly above, and some text under it (which is transparent):

You have now made all necessary fields and positions. You can style the text as you’d like, add more text, add links, whatever. I added some text shadow to make the text a bit more readable in my example.

Now let’s do the hover things. Select the wrapper in the navigation column on the left hand side and go to the Interactions tab at the top right.

2020-05-24 18_02_31-Webflow - PressFire.no

First we need to make the extra text show on hovering.

Add a hover interaction with the + sign and choose “start an animation”.
On “on hover in” a new animation with the + sign.
2020-05-24 18_02_42-Webflow - PressFire.no

Call it “reveal and blur” or whatever. Go to the left hand navigator column and select the “appearing-text” text field. Then back to the right hand side and add an action with the + sign. Select “opacity”.
2020-05-24 18_42_03-Webflow - PressFire.no

Select “set as initial state” and “opacity” at 0%.
2020-05-24 18_21_08-Webflow - PressFire.no

Add a new action (+ sign again) and add Opacity at 100%. Set a duration (I used 0.5 seconds) and easing to “ease”.
2020-05-24 18_16_14-Webflow - PressFire.no

Now the text will fade in when you hover on the image. Let’s add an effect to blur the image.
Click on the image in the left hand navigator column, then click under the “appearing-text Opacity” field in the interaction pane on the right. Click on “Filter”.
2020-05-24 18_29_35-Webflow - PressFire.no

Set it to start “with previous action”
2020-05-24 18_31_01-Webflow - PressFire.no

Add a filter -> blur. Set it to the desired effect.
2020-05-24 18_31_31-Webflow - PressFire.no

Your right hand should look something like this:
2020-05-24 18_45_21-Webflow - PressFire.no

Click done. The image will now blur, and the text will fade in. But it will stay like that, so we need another interaction for when the cursor leaves the image.

On to the “on hover out” (further down on the interaction side). Make a new timed animations with the + sign.
2020-05-24 18_08_02-Webflow - PressFire.no

Same thing as before, select the appearing-text field, add an action (“opacity”), then set the opacity to 0%. No need for the “initial state” thing here.
2020-05-24 18_23_24-

Click the image in the left hand navigator column, add another action (“filter”), add a filter -> blur with 0px blur.
2020-05-24 18_32_55-

You right hand should look something like this:
2020-05-24 18_45_41-Webflow - PressFire.no

Click done.

Final result:

3 Likes

To add more effect, just add inn more actions on the “hover in” part - remember to select the part you want to have an effect on, then add whatever you like (filters, movements, size changes, etc).

Just remember to add a counterpart on the “hover out” part that resets all :slight_smile:

1 Like

Damn man! Thank you sosososososo much that tutorial is amazing. I’ll try your steps once I finish my study and re-start working on the website :slight_smile:

Can I ask one last thing? If I want to transition i.e. MEN text from the middle to top-ish and the list of text shows up with equal spacing is that a thing you can do?

Sure, just play around with the Absolute positioning in the first few steps. You can do whatever you want with the text styling :slight_smile: