Build a Masonry Gallery with a Zoom Effect in Tailwind CSS

Have you seen photo galleries where images are arranged like a brick wall in a masonry layout and smoothly zoom when you hover over them? You can build that effect with only a few Tailwind CSS utility classes.

In this article, we will create a responsive masonry gallery with a hover zoom effect.

1. Gallery HTML Structure

A few div elements with Tailwind classes are enough to create the layout:

<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 p-4">
  <div class="mb-4 overflow-hidden rounded-lg">
    <img 
      src="https://picsum.photos/500/700.webp" 
      alt="Image 1" 
      class="w-full hover:scale-110 transition-transform duration-300 ease-in-out">
  </div>
  <div class="mb-4 overflow-hidden rounded-lg">
    <img 
      src="https://picsum.photos/500/500.webp" 
      alt="Image 2" 
      class="w-full hover:scale-110 transition-transform duration-300 ease-in-out">
  </div>
  <!-- Add more images as needed -->
</div>

2. What Do the Classes Mean?

• columns-1 sm:columns-2 md:columns-3 lg:columns-4 → changes the number of columns based on the viewport size: one on small screens, two on larger small screens, and so on.
• gap-4 → adds spacing between columns.
• p-4 → adds padding around the gallery.
• mb-4 → adds spacing below each item.
• overflow-hidden + rounded-lg → clips the zoomed image to the rounded container.
• hover:scale-110 + transition-transform duration-300 ease-in-out → creates a smooth zoom effect on hover.

3. Customize the Effect

• Number of columns: adjust the columns-* utilities. For example, use xl:columns-5 for five columns on extra-large screens.
• Stronger zoom: replace hover:scale-110 with hover:scale-125 or hover:scale-150.
• Slower transition: replace duration-300 with duration-500.

4. Good Use Cases

• Personal photo galleries or portfolios.
• Product showcases for online stores.
• Landing pages that benefit from an interactive visual layout.

5. Conclusion

Tailwind CSS makes it easy to build a responsive masonry gallery with a smooth zoom effect using only a small amount of HTML. Adjust the column count, scale, and transition duration to match your own design.