Willow Glen Project: 2025

.project-gallery-container:not(:first-child) { margin-block-start: calc(1.618em * 3); } .project-gallery-container:not(:last-child) { margin-block-end: calc(1.618em * 3); } [class*="project-gallery"] { position: relative; &.layout-masonry { all: unset } &:is(.layout-masonry) { --cell-width: calc(100% / var(--masonry-columns, 1)); @media screen and (min-width: 640px) { --masonry-columns: 2; --vertical-gap-fix: -7px; display: block; column-count: var(--masonry-columns, 2); column-gap: 3px; column-gap: 0; max-width: 1100px; top: calc(-1 * var(--vertical-gap-fix)) auto 0; } @media screen and (min-width: 768px) { &:has(> :is(:nth-child(2n), :nth-child(4n))) { --masonry-columns: 2; } &:has(> :is(:nth-child(3n), :nth-child(n+5))) { --masonry-columns: 2; } } .gallery-item { all: unset; } :is(.gallery-item) { position: relative; display: inline-grid; width: auto; margin: 2px; margin-block-start: var(--vertical-gap-fix); cursor: pointer; img { max-height: 375px; object-fit: cover; margin: 0; } figcaption { display: grid; align-content: end; justify-content: center; position: absolute; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient( hsl(from black h s l / 30%), hsl(from black h s l / 55%) ); color: white; overflow-wrap: anywhere; backdrop-filter: blur(3px); padding: 1em; padding-block-end: 1.618em; text-align: center; @media (prefers-reduced-motion: no-preference) { transition: opacity 0.2s ease-out; } :empty { display: none; } > :not(a) { color: inherit; } } &:hover { figcaption { opacity: 1; } } } } } https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.min.js https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/share/lg-share.min.js https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/pager/lg-pager.min.js const galleryContainer = document.querySelector('.project-gallery'); const slideShowOptions = { }; const gallery = lightGallery(galleryContainer, { speed: 500, plugins: [ // lgThumbnail, lgPager, lgZoom, lgShare, ], progressBar: true, thumbnail: false, download: false, exThumbImage: 'data-thumbnail-url', allowMediaOverlap: true, ...slideShowOptions, });