mirror of
https://github.com/imfing/hextra.git
synced 2025-09-15 12:01:59 -04:00
feat(image-zoom): add minimal image zoom functionality
- Introduced CSS for image zoom overlay and image styling. - Implemented JavaScript for handling image zoom interactions, including overlay creation and close functionality. - Updated configuration to enable image zoom feature in site parameters. - Added partial for including image zoom assets in the layout.
This commit is contained in:
42
assets/css/components/image-zoom.css
Normal file
42
assets/css/components/image-zoom.css
Normal file
@@ -0,0 +1,42 @@
|
||||
/* Minimal styles for Hextra image zoom overlay */
|
||||
.hextra-zoom-image-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--hextra-image-zoom-backdrop, rgba(0, 0, 0, 0.9));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.hextra-zoom-image-overlay.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hextra-zoom-image {
|
||||
max-width: min(95vw, 1200px);
|
||||
max-height: 95vh;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.hextra-zoom-image-overlay.show .hextra-zoom-image {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hextra-zoom-image-overlay,
|
||||
.hextra-zoom-image {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show magnifier cursor over zoomable images in content */
|
||||
.content img:not([data-no-zoom]) {
|
||||
cursor: zoom-in;
|
||||
}
|
Reference in New Issue
Block a user