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

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-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

4.2k
Card Princing

Author:
Raul antonio de la cruz hernandez

2 months ago

54
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

10 months ago

1.1k
Card
Simple Card

Author:
Anonymous

11 months ago

946
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

9 months ago

1.3k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

4 months ago

694
Minimal Profile card

Author:
Abhijit Sen

3 years ago

11.8k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Author:
Alif Bima Pradana

1 month ago

89
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

1 year ago

867
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

1 year ago

1.2k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

145

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components