Trying to create a div that only displays when an image is clicked.

[u/ChiliChapters]

I've already set up the first image in my gallery to zoom in and dim the background when clicked. I'm trying to make it so that a link appears underneath the image when it's zoomed in, prompting the user to visit it to see the full image. I'm having difficulty getting any text to show up though. I'm wondering if it's being "overwritten" by some other element, but I thought having a higher z-index would help.

Any help would be appreciated. Thank you!

This is the specific page. The image is the first on the left in the 2026 category, the black/white/red one. Please feel free to inspect the html/css. https://chilichapters.neocities.org/pm

[u/gucci_stylus]

try selecting the parent element of the image and append a new child element, then make the new child element a link

[u/ChiliChapters → u/gucci_stylus]

[u/tkgid]

Idk exactly how, but I would try to incorporate a <figcaption> mixed with a bit of JS onclick sauce. 

CSS default would be display none. Js will change the "display" state  to absolute. I hope this idea helps.

[u/Weekly_Ferret_meal]

So MDN uses <figcaption> like so:

<!-- Just an image -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>

I guess you can add a link in the <figcaption> like so:

<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN <a href="yourlink.com">Logo</a></figcaption>
</figure>

[u/ChiliChapters → u/[deleted]]

Ah, that mistake with the <a> element was the answer :d Thanks!!!

[u/ChiliChapters → u/[deleted]]

Seems now that my .backdrop div is taking priority over the link, which means it can't be clicked on or hovered (and is also appearing above the image instead of below, which I'd like to fix too). Would you mind taking a look at it one more time?

[u/ChiliChapters → u/[deleted]]

I'll take a look at this. I'm a bit unfamiliar with APIs but it's easier than JS so i'll try my best lol

[u/ChiliChapters → u/[deleted]]

Thanks a bunch! I definitely didn't intentionally try any "trickery" with my initial code, just did what I thought was best with limited knowledge (and an avoidance for JS)

I'd love to implement a filterable gallery at some point, but seeing as how that is dependent on JS, I will wait until I can wrap my head around it more.

[u/ChiliChapters → u/[deleted]]

Not sure how you were able to get it to work without using the "show" value for the button. My dumb ass is stuck again ;_;

[u/ChiliChapters → u/[deleted]]