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.6k

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
It's a product card

Author:
SAURAV SINGH

6 months ago

1.1k
card profie
profile card

Author:
Aman kumar

1 year ago

3.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.2k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.1k
Monkey card
First tailwind example

Author:
muhittin budak

6 months ago

570
Border gradient

Author:
Samuel Dawson

2 years ago

16.1k
Card
Card

Author:
Aman kumar

1 year ago

2.5k
Profile card

Author:
ariaw

1 month ago

113
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

6 months ago

792
cards
cards slices

Author:
Anonymous

1 year ago

6.5k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

8 months ago

1.1k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components