Streaming live at 10am (PST)

Help in combination between hoover and click interactions


#1

Hi again,

At our website: https://preview.webflow.com/preview/ttf?preview=d61bbfd23cddd240f4ac9554a8ff3da1

I want my mosaic gallery (see below) to have the following behaviour:

1) When I hoover over each picture it turns to light blue and the name of the person appears, When I hoover out they disappear.

2) When I press the picture, it opens a hidden section, and the blue layer and name stay visible until I press the picture again to close.

3) After closing the behaviour is the same as in bullet 1)

Well I think I am messing up at the interactions because I’m not able to keep both working. I supposed it should be a combination of a simple hoover behaviour with a click interaction but it doesn’t work like this.

Can you help with some guidance please?

Thank you

Manuel


#2

Other problem I'm Having is the following is with hierarchy between different interactions. How can I set hierarchy?

In example I want interaction A to be superior to B, when A is executed B cannot surpass it.

Thank you all


#3

What I see on your site it you already have a hover interaction that works as desired, and a click interaction that reveals the panel underneath, that works fine too.

So can I ask what is the issue again?


#4

Can't be done in Webflow, that's an issue when you want several interaction not interfering with each other sometimes...


#5

Yup I have already noticed.

I can make it work for one picture but then when I moved to the second I wanted it to close the first section when pressed and remove the blue square above the picture. It worked but then it deactivated the blue square making it stop working on hoover and when clicked.

I made the following test:

1) Initial State:


2) One DIV for the hoover behaviour:

3) One DIV for the pressed behaviour:

I want the blue div to close when the second image (woman) is pressed and it does but if I click the first picture again the blue div won't appear anymore. Is there any way to work around this?

Heres the link: https://preview.webflow.com/preview/ttf?preview=d61bbfd23cddd240f4ac9554a8ff3da1

Please go to the "HOME_GRID TESTE APAGAR" page

Thank you.


#6

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