Home
Nick Girga
Image Card

Image Card

An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

This tailwind example is contributed by Nick Girga, on 28-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Button

Author Nick Girga

Fork Fullscreen

<a class="group max-w-xl relative overflow-hidden rounded-[20px] m-4"
  href="https://unsplash.com/photos/aerial-view-of-green-trees-and-blue-sea-during-daytime-x-HCoTDGgZw"
  target="_blank"
  rel="noreferrer noopener">
  
  <img class="ease-in-out duration-500 scale-[100%] group-hover:scale-[110%]"
    src="https://images.unsplash.com/photo-1587974136998-4fcc253b6183?q=80&w=1710&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Example Image" />
  
  <div class="w-full h-full absolute bottom-0 left-0 right-0 top-0 rounded-[20px] bg-black/25 ease-in-out duration-300 opacity-0 group-hover:opacity-100">
    
    <h1 class="text-2xl sm:text-4xl font-bold text-white absolute bottom-[42px] sm:bottom-[48px] left-[24px]">
      Title
    </h1>
    
    <h2 class="text-md sm:text-xl font-bold text-white absolute bottom-[24px] left-[24px] opacity-75">
      Description
    </h2>
  </div>
</div>

Related Examples

IMDB score and votes box

Author:
Darius G

1 year ago

8.3k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

9.8k
Travel Landing Page: Australia

Author:
Maxim

2 months ago

796
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

1 month ago

229
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 week ago

148
Primary secondary button pair

Author:
Iris Callahan

7 months ago

674
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

11 months ago

1.9k
Login Form
Login Form

Author:
Md. Tofayel islam

8 months ago

1.6k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

7.2k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

9.5k
Blog Card

Author:
Md. Tofayel islam

6 months ago

749
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)
Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple

Author:
Prajwal Hallale

2 years ago

15.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components