Overlays lightboximageoverlay

Image Lightbox

Overlay for viewing high-resolution images in isolation.

Nature Landscape / 2024

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { ImageLightbox } from 'astro-component-kit';
---

<LightboxOverlay>Content</LightboxOverlay>
--- import { ImageLightbox } from 'astro-component-kit'; --- <LightboxOverlay>Content</LightboxOverlay>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ImageLightbox.astro and paste the following code:

astro 
---
---
<div class="lightbox">
  <div class="close">×</div>
  <div class="img-preview"></div>
  <div class="caption">Nature Landscape / 2024</div>
</div>
<style>
  .lightbox { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; }
  .img-preview { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; }
  .caption { margin-top: 2rem; color: #94a3b8; font-family: monospace; }
</style>
--- --- <div class="lightbox"> <div class="close">×</div> <div class="img-preview"></div> <div class="caption">Nature Landscape / 2024</div> </div> <style> .lightbox { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; } .img-preview { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; } .caption { margin-top: 2rem; color: #94a3b8; font-family: monospace; } </style>

Quick Info

Category
Overlays
Filename
ImageLightbox.astro
Dependencies
None — pure Astro + CSS
Tags
lightboximageoverlay