Create a hide and show modal

[Sebasgaes (Sebas Garro)]

Hi guys,
.
I am trying to recreate this behavior (http://studiosaxe.com/project/residential/ocean-eye-terrace-house/) click on +project info. I sort of created the modal and added two links, one for (+ project info) and one within the modal for hiding info. This because I have not yet figure out how to make one link with two words transitioning.

For the hide info link, I added a click trigger interaction with display none and 0% opacity, but I think that makes the + project info not clickable afterward. Here is a small clip with the behavior.

https://cl.ly/3E3e1q3t2f3h

In my project link, you can go to the residential collection page.

I will appreciate very much any kind of help.

---

Here is my public share link: https://preview.webflow.com/preview/studio-saxe?preview=cc72ae0f5f34c4bc354f3518fe278f5f

[Waldo (Waldo Broodrÿk)]

Hi @Sebasgaes great question!

I noticed that in your “hide interaction” you have the modal element set to display: none, so for your “more info project” interaction you need to set it to display: block at 0% opacity in the first step with 0ms, add another step to fade to 100% opacity and then you should have a nice fade in effect each time.

For your hide interaction, if you add a “0% opacity” step with some kind of ease, and then a step right after it to display: none that should make it fade out instead.

​Hope that this is helpful!

[Sebasgaes (Sebas Garro)]

Thank you very much for taking the time to look into this. If I set display: block the container will go like this:

Can I have it to display flex? Also, I don’t know what is happening with the hide information, is not doing anything.

[Sebasgaes (Sebas Garro)]

Here is the more info:

And here is the screen shot for the hide info interaction: