Home
R Thapa
Image Grid

Image Grid

The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

This tailwind example is contributed by R Thapa, on 01-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Image gallery Grid

Author R Thapa

12.8k

Fork Fullscreen

<div class="flex flex-col md:grid md:grid-cols-3 gap-3">
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?hanging-planters" alt="Hanging Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Hanging Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?planter-stand" alt="Planter Stand with Pots" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Planter Stand with Pots
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?watering-cans" alt="Watering Cans" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Watering Cans
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?metal-planters" alt="Metal Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Metal Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?table-top-planters" alt="Table Top Planters" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Table Top Planters
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?wall-mounted-stands" alt="Wall Mounted Stands" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Wall Mounted Stands
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?jute-plant-pots" alt="Jute Plant Pots" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Jute Plant Pots
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?bird-feeders" alt="Bird Feeders" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Bird Feeders
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?hanging-birds" alt="Hanging Birds" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Hanging Birds
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-sticks" alt="Garden Sticks" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover:bg-opacity-60 transition">
      Garden Sticks
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-tray-miniatures" alt="Garden Tray Miniatures" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Garden Tray Miniatures
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?garden-tool-set" alt="Garden Tool Set" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Garden Tool Set
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?candle-stand" alt="Candle Stand" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Candle Stand
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?lanterns" alt="Lanterns" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Lanterns
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?chimes" alt="Chimes" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Chimes
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?cage" alt="Cage" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Cage
    </p>
  </div>
  <div class="relative rounded overflow-hidden">
    <img src="https://source.unsplash.com/400x300/?bird-house-hanging" alt="Bird House Hanging" class="w-full">
    <p
      class="cursor-pointer absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center text-2xl text-center text-white font-roboto font-medium group-hover-bg-opacity-60 transition">
      Bird House Hanging
    </p>
  </div>
</div>

Related Examples

Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

54.3k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

17.1k
image gallery
image gallery [lightbox]

Author:
Anonymous

1 year ago

17.7k
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Author:
Prajwal Hallale

1 year ago

9.7k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

29.1k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

12.1k
Tailwind product gallery

Author:
JaxStone

2 years ago

24.6k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

39.8k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

17.5k
Responsive flexbox layout using Tailwind CSS

Author:
Leif99

2 years ago

11.8k
Customer testimonies grid

Author:
Sameer Sultana

1 year ago

17.9k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

16.2k
Company icons grid

Author:
Piet Vriend

2 years ago

9.4k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

11.4k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

1 year ago

5.2k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

10k
Bento grids

Author:
Maxim

1 year ago

17.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components