How to create overlay of fullscreen picture when clicking on it
Unanswered
Minskin posted this in #help-forum
MinskinOP
Hi! I am trying to create an effect where when clicking on a picture on my website, it instigates an overlay to pop up and show the picture in full screen, with an X icon to exit the overlay in the top right corner. I posted a picture below on how I want it to look like.
I've been trying to find material on how to do this online, but I didn't manage to find much. Im using Next.js and Tailwind CSS btw.
I've been trying to find material on how to do this online, but I didn't manage to find much. Im using Next.js and Tailwind CSS btw.
2 Replies
Just use a "position: absolute" element, center it on the screen and show/hide it using state
Make sure to assign it a high z-index too
Make sure to assign it a high z-index too
MinskinOP
Thanks, ill give it a shot!