photo-galleries
intermediate
masonry
gallery
photos
lightbox
portfolio
Category · Photo Galleries Difficulty Level · Intermediate Published on · January 27, 2024

Masonry Photo Gallery

Pinterest-style masonry photo gallery with hover effects and lightbox functionality, perfect for showcasing photography portfolios.

#masonry #gallery #photos #lightbox #portfolio

Responsive Design

Yes

Dark Mode Support

No

lines

331

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

400px

Overview

Pinterest-style masonry photo gallery with hover effects and lightbox functionality, perfect for showcasing photography portfolios.

How to use

  1. Copy the HTML markup into your page.
  2. Paste the CSS into your stylesheet and ensure the selectors match your markup.
  3. Paste the JavaScript and load it after the markup.
  4. Adjust spacing, colors, and text to match your design system.

Customization tips

  • Rename class names to avoid collisions with your existing CSS.
  • Replace hard-coded colors with CSS variables for theming.
  • Verify the layout at 320px, 768px, and 1024px widths.

HTML

61

lines

CSS

112

lines

JavaScript

158

lines


                <div class="masonry-gallery">
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop" alt="Mountain landscape" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>Mountain Vista</h3>
        <p>Beautiful mountain landscape</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop" alt="Forest path" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>Forest Trail</h3>
        <p>Peaceful forest pathway</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=500&fit=crop" alt="Lake view" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>Serene Lake</h3>
        <p>Crystal clear mountain lake</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop" alt="Desert sunset" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>Desert Sunset</h3>
        <p>Golden hour in the desert</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&h=350&fit=crop" alt="Ocean waves" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>Ocean Waves</h3>
        <p>Powerful ocean waves</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=550&fit=crop" alt="City skyline" />
    <div class="overlay">
      <div class="overlay-content">
        <h3>City Lights</h3>
        <p>Urban skyline at night</p>
      </div>
    </div>
  </div>
</div>

              
61lines
1933characters
HTMLLanguage

Browser Compatibility

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Related Code Snippets

Explore template packs

Need larger building blocks? Browse responsive landing pages and component bundles.

Open HTML Template Library ->