Image lightboxes with 'show me the alt text' buttons... in pure CSS - ✁ ∙ Web Crafting - MelonLand Forum

• Image lightboxes with 'show me the alt text' buttons... in pure CSS
  Posted by Dan Q on 11 Dec, 2025 13:20
• I had an idea recently and wanted to share it: a way of making:
  
  

  • "Lightboxes" (images where when you click them, you see a bigger/higher-def version as a "popover"/"overlay"),
  • with a "show alt text" button like Mastodon has (because alt text is for everybody!),
  • in pure CSS and semantic HTML (no JS = fast performance, less to break!)

  
  Here's what I came up with! The short of it is that you have some HTML code like this:
  
  

  Code: html

  <figure>
    <div class="img-with-alt-text">
      <details class="lightbox">
        <summary>
          <img src="owls-thumbnail.jpg" width="640" height="400" alt="A pair of barred owls rest in the shade of a leafy deciduous tree in the afternoon light.">
        </summary>
        <span class="lightbox-full-image">
          <img src="owls-full.jpg" width="6016" height="4016" loading="lazy" alt="Large image of a pair of barred owls rest in the shade of a leafy deciduous tree in the afternoon light.">
        </span>
      </details>
      <details class="alt-text">
        <summary><span>Alt</span></summary>
        <p>A pair of barred owls rest in the shade of a leafy deciduous tree in the afternoon light.</p>
      </details>
    </div>
    <figcaption>
      Photo courtesy Tom Nebel, used under the Pexels license.
    </figcaption>
  </figure>
  

  
  This works by itself because of the semantic HTML, but it's not very pretty, so we enhance it with this CSS:
  
  

  Code: css

  body:has(.lightbox[open]) {
    overflow: hidden;
  }
  
  figure {
    width: fit-content;
  }
  
  .img-with-alt-text {
    position: relative;
  }
  
  .lightbox {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
  
    summary {
      list-style: none;
      cursor: zoom-in;
    }
  
    &[open] {
      summary {
        cursor: zoom-out;
  
        &::after {
          content: "";
          position: fixed;
          z-index: 1;
          background-color: rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(2px);
          inset: 0;
        }
      }
  
      .lightbox-full-image {
        position: fixed;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5ch;
  
        img {
          object-fit: contain;
          z-index: 3;
          height: 100%;
          width: 100%;
        }
      }
    }
  }
  
  .alt-text {
    font-size: 90%;
  
    summary, p {
      background: rgba(0, 0, 0, 0.65);
      color: var(--color-secondary);
      border-radius: 4px;
      padding: 1px 3px;
      margin: 0;
    }
  
    summary {
      position: absolute;
      bottom: 10px;
      left: 5px;
      list-style: none;
      cursor: pointer;
      text-transform: uppercase;
    }
  
    p {
      right: 5px;
    }
  
    &[open] {
      position: absolute;
      bottom: 10px;
      left: 5px;
      right: 5px;
  
      summary {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
  
        span {
          display: none;
        }
  
        p {
          right: 5px;
          margin: 0;
          padding: 0 2px;
        }
      }
    }
  }
  

  
  I don't like the repetition in the HTML, but if you're using a CMS or a Static Site Generator then it's unlikely to be an issue.
  
  Anyway, have a play with what I came up with if it's the kind of thing that interests you. Could be great for a blog or a gallery page.