Home
Maxim
Hover Card

Hover Card

This tailwind example is contributed by Maxim, on 09-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Maxim

2.1k

Fork Fullscreen

<div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
	        
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 1</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 1</p>
                </div>
            </a>
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 2</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 2</p>
                </div>
            </a>
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 3</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 3</p>
                </div>
            </a>
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 4</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 4</p>
                </div>
            </a>
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 5</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 5</p>
                </div>
            </a>
            
            <a href="#" class="relative group block bg-cover bg-center aspect-square rounded-lg overflow-hidden shadow-lg" style="background-image: url('https://via.placeholder.com/300');">
                <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-75 transition duration-300 ease-in-out"></div>
                <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
                    <h3 class="text-white text-2xl font-bold mb-2 transform group-hover:-translate-y-2 transition duration-300 ease-in-out">Service 6</h3>
                    <p class="text-white text-center opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">Short description of Service 6</p>
                </div>
            </a>
            
        </div>
    </div>

Related Examples

card profie
profile card

Author:
Aman kumar

1 year ago

3.7k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

275
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

9.7k
Product card

Author:
Simon Scheffer

2 years ago

28.9k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

5.4k
Product card

Author:
Oliver Hansen

2 years ago

9.3k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

11 months ago

2.1k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

4 months ago

1.3k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

8 months ago

1.3k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.1k
Image cards

Author:
Reuben Enahoro

6 months ago

1.2k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components