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

2.1k

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

1 year ago

12.1k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
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 year ago

2.1k
Profile Card
User profile card

Author:
Ajay Thakur

4 months ago

181
Card
Card

Author:
Aman kumar

1 year ago

2.6k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

1 year ago

1.3k
Fancy blog post card

Author:
Mr Robot

3 years ago

12.7k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.8k
Product Details Card

Author:
ABDO-SY

1 year ago

2.3k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.6k
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

2k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components