Streaming live at 10am (PST)

Having problems with a blur-interaction and hover state

Hi there,

let me preface this by saying that I’m by no means a qualified web designer. I’ve recently just started and am learning. Also I’m not experienced when it comes to Webflows forum, or any forum at all for that matter.

That being said I hope you guys can help me and I am very grateful for every attempt.

I’m working on this rather simple website for renting out workspace.
There is one page, which gives and overview over all the services that go along with meeting the different rooms.

It consists of three columns and I want the other ones to blur our, when hovering one of the three. Also there is a small window giving information on each service when hovered over.

The blur I tried to achive via an interaction on each column. The little info-window by using the hover-state on each service, changing the overflow when hovered over.

As you can see, since for some reason things overlap the info-window and I can’t tell why. I’ve tried several different things, but never managed to get it to work completly. Also I feel like it’s completly random, I really can’t make much sense of it.

Might be a simple problem for you guys. Thank you for any help!

I really hope I’ve done everything right with this post.

Here is my public share link: LINK
(how to access public share link)

1 Like

Hi @Juwi,

To overcome the overlap issue, just increase the column’s position on the z-axis during the hover interaction to bring it forward compared to the other two columns. This way any children of that column element will be in front of all other children belonging to the other columns. Make sure to reset the z position on mouse hover-out to ensure that it goes back to original position on z-axis. I tried it on my side and seemed to work fine. Here are the settings I used on mouse hover:

I hope that helps! :slight_smile:

1 Like

Hi @Mike_Zachariades ,
it seems I misunderstood something about the z-index in columns.
I now got the outer ones to work by simply giving them a higher z than the middle one.
Then I tried your method on the middle one, but I can’t seem to get it to work.
Would you mind looking at my project again? I can’t seem to find the error.

Thank you very much for you help.

1 Like

Hi again @Mike_Zachariades,

I just redid the whole thing with a flex box instead of the column and it worked without any problems.
If you don’t mind me asking, what are columns good for? The one reason I can imagine is for browser that don’t support flex boxes, but other than that?
Up until now I just used them when it seems fitting, but I think I’ll stop using them all together, since I don’t see a reason.

Anyways, I still couldn’t do it without your previous suggestion. I didn’t even know you can affect an objects z-index via an interaction.

Thank you very much and I hope you are having a great day.

1 Like

Hi @Juwi,

I am glad you managed to make it work! :slight_smile:

For information purposes, in order to make your overlaps work properly in your previous column setup you have to change the z-axis position of each column with an interaction and not the initial z-index of the element itself (the elements should all have the same initial z-index). This will make their positioning dynamic. Essentially, you have to tell the interaction to bring a specific column forward on the z-axis (e.g. 500px) on mouse-hover and to reset it back to its original z-axis position (i.e. 0px) on mouse-hover-out so that it doesn’t get in the way of the other columns when they are hovered on respectively.

Regarding using flex box over columns, there is no single right way to approach website layout in my view. It is up to you to choose the easiest way to achieve the design and function you want. Since flex box seems easier to set up to perform the task you want, then this is probably the best way forward for you. However, as you correctly mentioned, there have been certain compatibility concerns in the community regarding the use of flexbox with certain browsers (refer to this topic) but I understand that there are workarounds. Personally, I wouldn’t avoid using flexbox as it is quite a key feature.

I hope that I have been of some help. Have a great day!

1 Like

Sorry for the delayed response.

So I could have make it work with columns as well, good to know.
Then again, I’ll just stick to flex boxes for now.

Also thank you for the insight, I highly appreciate it.

Have a nice week,
Julian

1 Like