Click to reveal overlay and close overlay interactions not working

Hi,

I have a grid of images. Each grid cell contains an image and an overlay. The overlay contains a title, short paragraph and link. When an image in the grid is clicked, I would like the overlay to appear. I would also like to be able to close the overlay by clicking on the cross (top right of overlay). I am so close getting this to work but cannot for the life of me figure out why the interactions aren’t working as they should!

Has anyone else had this problem before?

Please check the link below. The overlay is the blue block that I would like to make visible when clicking on an image.

Thanks


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

Hey @adamleeblythe, I can’t see any interactions set up for this to work. Have you done any work on this so far or are you looking for a complete guide on how to achieve this?

Hi Julian,

Thank you for your reply. I’ve just set the interaction up again and this is as far as I got. Please check the link again. I really would like to be able to click the close button to hide the blue overlay. Adding an interaction to the close button does nothing for me.

Thanks

Hey Adam, make sure to add the closing interaction to On 1st click. Also add opacity to your interactions for it to work. You can follow the necessary steps in the video below. Let me know if you can get it to work.

1 Like

Hi Julian,

That’s amazing thank you! I’ve got it to work! Your video was super clear!

One thing that I have noticed is that the show animation doesn’t work quite as it should the second time you click it. The overlay shows again but without the easing transition. Any idea why it does this?

I tried duplicating the initial state action of the show animation but this didn’t work.

Also, as I plan on having each image block on this page use the interaction above, is it possible to close the overlay when clicking on another image block?

I might be way over thinking this and happy to explore other options if needed.

Thanks again for your help Julian

1 Like

Hi Adam,

Perfect! That’s great to hear.

Yes, I can see that as well. I can’t quite figure this out for now. Maybe someone more experienced with interactions can chime in and help out.

Check out the following thread. I think this might help you achieve what you’re after.