→ Alexander Hayes
→ Bento Grid Gallery with Image Hover Effe...

Bento Grid Gallery with Image Hover Effects

A stylish bento grid layout showcasing images in different sizes with smooth hover effects. Perfect for portfolios, galleries, and creative showcases.

This Example is contributed by Alexander Hayes, on 24-Mar-2025. It is responsive.

Gallery Bento Grid Masonry

Author Alexander Hayes

Fork Fullscreen

<div class="bento-container">
  <div class="bento-item bento-large">
    <img src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd" alt="Architectural photography">
    <div class="bento-item-content">
      <h3>Architecture</h3>
      <p>Urban designs</p>
    </div>
  </div>
  <div class="bento-item bento-medium">
    <img src="https://images.unsplash.com/photo-1603775020644-eb8decd79994" alt="Portrait photography">
    <div class="bento-item-content">
      <h3>Portraits</h3>
      <p>Human expressions</p>
    </div>
  </div>
  <div class="bento-item bento-small">
    <img src="https://images.unsplash.com/photo-1579952363873-27f3bade9f55" alt="Food photography">
    <div class="bento-item-content">
      <h3>Food</h3>
      <p>Culinary art</p>
    </div>
  </div>
  <div class="bento-item bento-medium">
    <img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809" alt="Abstract art">
    <div class="bento-item-content">
      <h3>Abstract</h3>
      <p>Creative vision</p>
    </div>
  </div>
  <div class="bento-item bento-small">
    <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7" alt="Car photography">
    <div class="bento-item-content">
      <h3>Automotive</h3>
      <p>Speed and design</p>
    </div>
  </div>
  <div class="bento-item bento-large">
    <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0" alt="Landscape photography">
    <div class="bento-item-content">
      <h3>Landscapes</h3>
      <p>Natural wonders</p>
    </div>
  </div>
  <div class="bento-item bento-medium">
    <img src="https://images.unsplash.com/photo-1585184394271-4c0a47dc59c9" alt="Technology photography">
    <div class="bento-item-content">
      <h3>Technology</h3>
      <p>Modern gadgets</p>
    </div>
  </div>
</div>

Related Examples

Responsive Post Card Grid Layout

Author:
Anonymous

3 weeks ago
Feature Showcase Grid with Icons
A responsive grid layout showcasing key features with accompanying icons to enhance visual appeal and improve user engagement.

Author:
Anonymous

1 month ago
Feature Highlights Grid
Showcase your product's key features with this visually appealing grid layout of feature cards. Each card highlights a specific functionality.

Author:
Dino Smith

2 months ago
Topic Category Card Grid Layout
A responsive card grid system featuring clickable categories that adapt to different screen sizes, perfect for organizing and showcasing various content topics.

Author:
Anonymous

4 weeks ago
3-Column Responsive List Grid for Modern Web Layouts

Author:
Anonymous

1 month ago
Responsive CSS Grid Layout
Create a fully responsive grid layout using CSS Grid. Easily adjust the number of columns for different screen sizes.

Author:
Jaxon Green

2 months ago
Feature Card Grid Layout
A clean, responsive grid layout showcasing product or service features with icon illustrations and descriptive text.

Author:
MD. Tayyub

1 month ago
Responsive Feature Grid Cards for Modern Websites
Showcase your product's key features with these responsive grid layout cards. Perfect for highlighting services, benefits, or product specifications on landing pages.

Author:
Morgan

2 months ago
Featured Content Section with Cards
A responsive content section featuring cards with images, headings, and descriptions, perfect for showcasing articles, products, or features on your website.

Author:
Morgan Reynolds

1 month ago
Feature Cards with Hover Effects

Author:
Sammy Rodriguez

1 month ago
Responsive Product Card Grid with Image and Pricing Details
A responsive product card grid layout showcasing product images with detailed pricing information, perfect for e-commerce websites and online stores.

Author:
Julian Parker

1 month ago
Image Slider with Information Display

Author:
Anonymous

1 month ago

Didn't find component you were looking for?

Search from 500+ components