Home
Reuben Enahoro
Image cards

Image cards

This tailwind example is contributed by Reuben Enahoro, on 25-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Card Image gallery

Author Reuben Enahoro

648

Fork Fullscreen

<section class=" flex flex-col gap-10 w-full justify-center">
  <h1 class='text-2xl text-center font-sans uppercase font-bold text-gray-700'>Image Cards</h1>
  <p class="text-center">Each of the cards have texts decsriptions, which get displayed when you hover the images. Just some dummy texts.</p>
  <section class=" flex flex-wrap gap-10 w-full justify-center items-center ">
    <div class="relative group w-80">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2020/02/23/15/09/woman-4873600_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-16 text-xl font-bol bg-black opacity-75 w-full py-5 text-center">HOVER THE IMAGE ONE</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
    <div class="relative group w-80 ">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2020/09/20/16/27/model-5587623_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-10 text-xl font-bol bg-black w-full py-2 text-center">HOVER THE IMAGE TWO</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
    <div class="relative group w-80">
                <span class="flex flex-col justify-center items-center">
                    <img
                        src="https://cdn.pixabay.com/photo/2019/12/10/13/31/woman-4685862_960_720.jpg"
                        alt="Sample"
                        class="w-full h-full object-cover rounded-lg"
                    />
                    <h1 class="-mt-10 text-xl font-bol bg-black w-full py-2 text-center">HOVER THE IMAGE THREE</h1>
                </span>
                <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-5 text-center font-sans">
                    <h2 class="text-xl font-sans font-bold text-gray-100">JUST BEFORE TAKE-OFF</h2>
                    <p class="text-gray-50 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit autem quaerat explicabo, voluptatum, assumenda placeat reiciendis aliquid itaque voluptates facere odit laboriosam, exercitationem aperiam labore dolorem quasi quia minima. Fugiat maxime, molestias molestiae aliquid animi quas voluptas natus sequi iusto atque placeat, suscipit, voluptatem laborum libero sit fuga deserunt accusamus!</p>
                </div>
    </div>
  </section>
</section>

Related Examples

Animated cards with Tailwind CSS

Author:
Michael Andreuzza

9 months ago

7.7k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

9 months ago

3.5k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

1 month ago

449
Card animate

Author:
Raul antonio de la cruz hernandez

2 weeks ago

191
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

15.7k
Group hover card
article card

Author:
Sienna

2 years ago

10.5k
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

7 months ago

1.1k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

13.9k
Product review card

Author:
Rama krishnan Subramanian

4 months ago

486
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

7 months ago

1.5k
Patient card

Author:
Anonymous

7 months ago

1.1k
Elevated feature card

Author:
magersa

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components