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.
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?
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.
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.
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.