Description
I propose adding another high-difficulty, pure CSS interactive component: an Image Lightbox Gallery. This component will allow developers to display a grid of thumbnail images. When a user clicks a thumbnail, the image smoothly expands to fill the screen in a dark, modal-like overlay, complete with a close button and smooth entry animations.
This implementation will completely avoid JavaScript, relying entirely on the CSS :target pseudo-class and HTML anchor links to manage the state of the lightbox.
Why is this useful for EaseMotion CSS?
Lightboxes are an essential feature for portfolios, e-commerce sites, and blogs. Just like carousels, developers usually import large third-party JavaScript libraries (like Fancybox or Lightbox2) simply to enlarge an image. By providing a pure CSS solution that hooks into the browser's URL hash (via :target), EaseMotion CSS offers an incredibly performant, zero-dependency alternative that is fully accessible and inherently supports the browser's "Back" button to close the image!
HTML Snippet
html
CSS Snippet
css
/* Thumbnail Styling */
.ease-lightbox-thumbnail {
display: block;
border-radius: var(--ease-radius-lg);
overflow: hidden;
box-shadow: var(--ease-shadow-md);
aspect-ratio: 1 / 1;
}
.ease-lightbox-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ease-speed-medium) var(--ease-ease);
}
/* Lightbox Overlay (Hidden by Default) */
.ease-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px); /* Glassmorphism background */
z-index: 9999;
/* Flexbox centering */
display: flex;
justify-content: center;
align-items: center;
/* Hidden state /
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ease-speed-medium) var(--ease-ease),
visibility var(--ease-speed-medium) var(--ease-ease);
}
/
- The Magic Rule: :target
- Triggers when the URL hash matches the element's ID
/
.ease-lightbox-overlay:target {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/ Invisible clickable area behind the image to close the lightbox /
.ease-lightbox-close-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: zoom-out;
}
/ Centered Image Content /
.ease-lightbox-content {
position: relative;
z-index: 2;
max-width: 90vw;
max-height: 90vh;
}
.ease-lightbox-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: var(--ease-radius-md);
box-shadow: var(--ease-shadow-lg);
}
/ Explicit Close Button */
.ease-lightbox-close-btn {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 2rem;
text-decoration: none;
line-height: 1;
transition: color var(--ease-speed-fast) var(--ease-ease);
}
.ease-lightbox-close-btn:hover {
color: var(--ease-color-primary);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding another high-difficulty, pure CSS interactive component: an Image Lightbox Gallery. This component will allow developers to display a grid of thumbnail images. When a user clicks a thumbnail, the image smoothly expands to fill the screen in a dark, modal-like overlay, complete with a close button and smooth entry animations.
This implementation will completely avoid JavaScript, relying entirely on the CSS :target pseudo-class and HTML anchor links to manage the state of the lightbox.
Why is this useful for EaseMotion CSS?
Lightboxes are an essential feature for portfolios, e-commerce sites, and blogs. Just like carousels, developers usually import large third-party JavaScript libraries (like Fancybox or Lightbox2) simply to enlarge an image. By providing a pure CSS solution that hooks into the browser's URL hash (via :target), EaseMotion CSS offers an incredibly performant, zero-dependency alternative that is fully accessible and inherently supports the browser's "Back" button to close the image!
HTML Snippet
html
/* Flexbox centering */
display: flex;
justify-content: center;
align-items: center;
/* Hidden state /
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ease-speed-medium) var(--ease-ease),
visibility var(--ease-speed-medium) var(--ease-ease);
}
/
/
.ease-lightbox-overlay:target {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/ Invisible clickable area behind the image to close the lightbox /
.ease-lightbox-close-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
cursor: zoom-out;
}
/ Centered Image Content /
.ease-lightbox-content {
position: relative;
z-index: 2;
max-width: 90vw;
max-height: 90vh;
}
.ease-lightbox-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: var(--ease-radius-md);
box-shadow: var(--ease-shadow-lg);
}
/ Explicit Close Button */
.ease-lightbox-close-btn {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 2rem;
text-decoration: none;
line-height: 1;
transition: color var(--ease-speed-fast) var(--ease-ease);
}
.ease-lightbox-close-btn:hover {
color: var(--ease-color-primary);
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.