Hover Card

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

Tailwind v3.4 3.3k 5

<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

Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
Blog Author Card

EliteAI Tools

1 year ago

1.9k
ApexCodeStudios.com Celestara Profile Odyssey
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Beautiful dual-style profile cards with cover images, stylish avatars, stats sections, social links, and follow buttons.

Apex Code Studios

6 months ago

254
Best incamas to date

ORGIN_DREAMS

1 year ago

1.7k
opulent
this a page didicated for laptops,phones using tailwindcss

ishimwe shadad

1 year ago

2k
Elevated feature card

magersa

2 years ago

5.1k
User profile card

Mr Robot

3 years ago

12k
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

794
Card 30/70

Maxim

1 year ago

1.8k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

CodewithFaraz

1 year ago

1.1k
Feature card

Matti

1 year ago

2.1k