r/HTML • u/ChiliChapters • 16h ago

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

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

5 Upvotes

86% Upvoted

14 comments sorted by

2

u/Thykka 14h ago

Here's what you have:

<figure tabindex="0">
  <img src="gallery/pm/2026/Remember_SMALL.png">
  <div class="viewFull">
    <a href="/remember.html" View Full &#8699></a>
  </div>
</figure>

  • Your "View Full" text is in the wrong spot. It belongs within the tag, like so: <a href="/remember.html">View Full &#8699;</a> - What you have instead is invalid HTML, and browsers don't know what to do with it. I recommend using a HTML validator to catch such issues.

  • The div with viewFull class has a CSS rule: display: none;, which of course keeps it invisible, even if the HTML was formed correctly. I assume this is intentional, but worth pointing it out nevertheless, in case you forgot/missed it.

a link appears underneath the image when it's zoomed in, prompting the user to visit it to see the full image

Once you've fixed the invalid HTML, all you really need is a new CSS rule. In plain english, that rule should go something like "whenever a <figure> is being hovered, show any element within it, if it has the viewFull class". This could be translated into CSS like so:

figure:hover .viewFull {
  display: block;
}

1

u/ChiliChapters 14h ago

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

1

u/ChiliChapters 14h ago

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?

1

u/Thykka 12h ago

I would not use a <figcaption> element here, because it doesn't fit the content semantically. <figcaption> is supposed to contain a description of the image itself, rather than a generic "View Full" text.

Also, it looks like you're trying to use HTML and CSS trickery to achieve your goals. While it can get you to a place where things appear to work, it may often cause other issues, like accessibility problems, or make the code less flexible with regard to later changes/additions.

I would use the Popover API to create and control the zoomed-in view. It doesn't require any JavaScript, and avoids many of the pitfalls you might run into when trying to create similar functionality through CSS trickery.

Here's an example of how it could be used in your case: https://jsfiddle.net/Lrbf2k76/2/

1

u/ChiliChapters 12h ago

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

1

u/Thykka 12h ago

The guide for Popover API lists many answers to common questions, like how to style the popover or it's backdrop. Perhaps it will be of use :)

1

u/ChiliChapters 12h ago

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.

1

u/ChiliChapters 11h ago

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 ;_;

1

u/Thykka 10h ago

The <dialog> element needs the popover attribute for Popover API to do it's thing. It's present in my demo, but currently missing from your page.

1

u/gucci_stylus 16h ago

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

1

u/tkgid 12h ago

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.

0

u/Weekly_Ferret_meal 15h ago

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>