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

1.9k

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

12k
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
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

2 months ago

108
Simple card layout with image

Author:
Leon Bachmann

3 years ago

11k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

3 years ago

10k
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

1 year ago

3k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

8 months ago

1.1k
Form package

Author:
Hunter Guru

1 year ago

2.6k
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

Author:
R Thapa

2 years ago

14.4k
Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.5k
Feature card

Author:
Matti

1 year ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components