Image Modal

Image Modal (Lightbox)

Click a thumbnail and a full-size version pops up in a dark overlay.

The structure

<img class="thumb" src="small.jpg" alt="Preview">
<div class="modal" hidden>
  <img src="big.jpg" alt="Full photo">
  <span class="close">×</span>
</div>

The CSS

.modal {
  position: fixed;
  inset: 0;              /* top right bottom left = 0 */
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal img {
  max-width: 90%;
  max-height: 90%;
}
.modal .close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
}

Hiding

Use the hidden attribute (or display: none) and flip it with JS (or the <dialog> element).

Accessibility

• Add role="dialog" and aria-modal="true".
• Close on Esc and click-outside in JS.
• Keep the thumbalt informative.

TL;DR

• Fixed full-screen inset: 0 overlay + centered image = modal.
• rgba darkness makes the photo pop.
• hidden/display controls visibility.
• Add alt text, role, and an easy close button.