Creating an Interactive Image Gallery with HTML and CSS
Navigating on Dribbble, I found a photo gallery design that I liked. And, as with many things I find online, “How could this be built?” was the first thing that came to mind. This is how I did it.
The other day, while navigating online looking for inspiration, I found a photo gallery design by kevin on Dribbble, so I decided to create a minimal version of it (you can see a live demo on CodePen or at the end of the article.)
The HTML Structure
The HTML will be limited to just a container and eight photos for simplicity. This choice is just for the demo. The idea is for the code to be extendable to any number of pictures or elements –e.g., buttons or links containing the images or having them as backgrounds.
<article class="grid-gallery">
<img src="./pic-1.webp" alt="description of picture 1" />
<img src="./pic-2.webp" alt="description of picture 2" />
<img src="./pic-3.webp" alt="description of picture 3" />
<img src="./pic-4.webp" alt="description of picture 4" />
<img src="./pic-5.webp" alt="description of picture 5" />
<img src="./pic-6.webp" alt="description of picture 6" />
<img src="./pic-7.webp" alt="description of picture 7" />
<img src="./pic-8.webp" alt="description of picture 8" />
</article>Instead of using <img> tags, we could use buttons or links, and the CSS change would require only minor modifications. Again, for simplicity, we’ll go with only images.
Setting the Stage: Styling the Grid
To create the effect of the intertwined pictures, we will use a grid with six columns. This may seem counterintuitive because we have rows with 3 or 2 photos. But it makes sense that each image will occupy two columns, and the rows with only two pictures will be “shifted” by one column (more on this soon). Also, the rows will be half the size of the image, making the grid cells squared.