Author: | Temani Afif |
---|---|
Views Total: | 775 views |
Official Page: | Go to website |
Last Update: | July 18, 2022 |
License: | MIT |
Preview:

Description:
A minimal photo gallery that expands the image to the full size on hover without breaking the layout. Built with CSS Grid Layout system.
How to use it:
1. Add images to the gallery.
<div class="gallery"> <img src="1.jpg" alt="Alt 1" /> <img src="2.jpg" alt="Alt 2" /> <img src="3.jpg" alt="Alt 3" /> ... </div>
2. The required CSS styles for the gallery.
.gallery { --s: 150px; /* control the size */ --g: 10px; /* control the gap */ --f: 1.5; /* control the scale factor */ display: grid; gap: var(--g); width: calc(3*var(--s) + 2*var(--g)); aspect-ratio: 1; grid-template-columns: repeat(3,auto); } .gallery > img { width: 0; height: 0; min-height: 100%; min-width: 100%; object-fit: cover; cursor: pointer; filter: grayscale(80%); transition: .35s linear; } .gallery img:hover{ filter: grayscale(0); width: calc(var(--s)*var(--f)); height: calc(var(--s)*var(--f)); }