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

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

Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

7 months ago

1.5k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

11 months ago

1.5k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

3 months ago

302
avtarCard3

Author:
pablitodgb

2 months ago

507
Food App Web design

Author:
Aitrik Saha

6 months ago

1.3k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
farisubuntu

1 year ago

2.1k
offer card

Author:
ABDO-SY

6 months ago

622
Card Slider

Author:
Maxim

5 months ago

1.1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 weeks ago

92
3D card
it is a 3D card

Author:
Bonimater

3 months ago

358
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

10 months ago

1.4k
Card
amazing card

Author:
Cristian

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components