Streaming live at 10am (PST)

Text Hover on Flexbox & Wrapper Background Image

Hi guys,

I’m a designer new to using webflow. I just found out about it and I think it’s fantastic to designer who are not familiar with coding. I read the forum and blogs and I still cannot wrap my head around it.

I’m working on rebranding my portfolio and came across couple of problems:

  1. The show text on hover using flexbox. Mine works but it seems like the area of hovering is only that wide block of text wrapper instead of the whole wrapper (main wrapper) which consists of background img.

  2. I know that once you give class to something it means it applies to everything. But what if I need the same class to applies to all my div block but I need to change the image of every block to a different ones. (see how my 3 main wrapper have the same img but they are actually 3 different projects)

Here is the link of my website

Thank you for the help!

Hi, welcome!

  1. Try using the Interactions. With Interactions you can say, when I hover over THIS thing, change this OTHER thing. Opacity is one of the properties Interactions allow you to manipulate.

First. select the element you want to interact with. Maybe in this case, main wrapper. Open the Interactions menu thing.

Create a new interaction and select Hover as the Trigger. This means something will happen when you hover over this main wrapper.

Check “Affect different elements” and type in text wrapper - the thing you want to be affected when you hover over the main wrapper.

Then limit to nested elements. We only want this interaction to affect the main wrapper’s own text wrapper.

Add a step on Hover Over. Go down to opacity and slide it all the way to 100%. Hit Done.
Add a step on Hover Out. Go down to opacity and slide it down to 0

You’re good!

In order for the text wrappers to start out as opacity 0, select a text wrapper, and change it’s opacity to 0.

  1. I often do the same thing. To do this, I give each div the same class as usual and add the properties each box would have in common. Then I give each div its own second class. Then you can add different styles, like a background image, to each one.

If you need to edit the styles of the main wrapper, you can select that icon on the far right.

Hi Sarah,

Thank you so much for your help!

I followed your instruction on the hoer interaction but it doesn’t work. It made the whole wrapper opacity to 0 from the first time it load and when I hover to the area it didn’t show anything.

For the two class suggestion. It works! Never thought of that!

Hi @foldandsuch, could you please describe exactly, what element on the page do you want the mouse to hover over, to trigger the interaction, and what element do you want to affect, and what effect, just a fadein?

Screenshots of the exact elements you want to affect is helpful.

Thanks in advance.

Hi @cyberdave

So what I have right now is this :

You can see the text without hovering unto the main wrapper area.

When I hover over that area, I applied this overlay :

What I’m looking for is the text only appear when I hover over the main wrapper area. But what’s happening now is, because the text area is only in the centre, it will only show up if I go to that particular area and not the whole main wrapper area.

Followed @sarahc suggestion and the whole main wrapper is gone and no hover effect visible. I’m probably missing something here.

Oh, I see. Try this:

I styled the Text Wrapper to fill the space of the Main Wrapper. The Text Wrapper has the colored overlay, and contains the text.

I applied a new Interaction to the Text Wrapper. I set the initial state of Text Wrapper to Opacity 0%. Then on Hover Over, Opacity changes to 100%. On Hover Out, it changes to 0%.

Because Text Wrapper fills the entire Main Wrapper, the entire area should trigger the effect.


Hi @sarahc yes tried that last night and it works!

I suspected the same thing too, that the text wrapper doesn’t fill the entire space.

One more question: do you know why when I edit in 13" macbook vs 27 imac the website looks really different? The only way I can make them look the same is if I zoom out to around 75% in my macbook. I know I need to change them to become responsive at the top tablet and mobile icon, but do you maybe know why?

Maybe try to make your padding be VH, VW measurements as well?

By the way: Nice site design! :grinning:

Hi @VladimirVitaliyevich I do that to all my flexbox but they still looks out of place.

Thank you! Still learning how to understand Webflow though! Appreciate all the help from the community!

YES! High five!

Here’s something to try to debug that inconsistency on your two screens: For each screen, determine the width of the browser windows and compare them to Webflow’s breakpoints.

  1. It’s possible that your 13" macbook’s screen is small enough that even though you’re on a ‘desktop’ the width is less than 991px (which is the tablet breakpoint). In this case, you’ll address those issues when you begin working on the tablet breakpoint.

  2. It’s also possible that the 13" macbook’s width is more than 991px, and you’re still seeing the Desktop breakpoint. In this case, the layout inconsistencies are because your desktop layout isn’t flexible enough. In that case, you’ll want to take @VladimirVitaliyevich’s advice and work with relative meansurements (vh which is relative to the viewport height, and vw which is relative to the viewport width).

When I design for desktop, I make sure I narrow my canvas to the narrowest desktop width possible and make sure everything still fits. It’s kind of hard to grab, but on the Desktop breakpoint in the Designer, you can grab the edge to resize the canvas.

@sarahc Internet HIGH five!
Thank you so much for the help!

For the inconsistency issue, I just created a new topic for it here Trouble keeping consistency in between breakpoints

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.