Hover effect card with background image

Beautiful card with background image, hover effect and gradient

This tailwind example is contributed by Walid Ahmad, on 11-Aug-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form,Transitions

Card Contact us Hover Gradient Animation

Author Walid Ahmad

Tailwind v3.4 4.2k 7

Fork Fullscreen

<div class="relative overflow-hidden group h-[500px] bg-primary card-hidden">
                    <img src="https://images.unsplash.com/photo-1595239244990-b609da3d95f2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxkYXRhJTNBaW1hZ2UlMkZibXAlM0JiYXNlNjQlMkNRazMyQkFBQUFBQUFBRFlBQUFBb0FBQUFDQUFBQUFnQUFBQUJBQmdBQUFBQUFNQUFBQUFUQ3dBQUV3c0FBQUFBQUFBQUFBQUFvWnRhbnBaTm9aTTR0S05KeTd0dzBjV0Z1clYlMkZpcEJqcDZSMW41dGtsSTQlMkZvWmxLdkxWNXlNT1R0TFNLaFl0Z3I2Mk1vYUY1aUl0Tmk1RlRxN0NJdnNLa3I3T1dnSVpkdGJPYXBhYUhobzVnaEpKbnBMS1l1Y1N5ckxTZ2ZvVmZ0N1dkcXF1T2s1bDBrcDklMkZyTHFudk1pN3JiYW1nSWRtdDdPWHNLMlBwYWFGckxHV3ZzYTB4YzYlMkZzYm1vaG8xdXRiQ1BzNiUyQk50YkdSd0wlMkJsenRDOHp0TEJ0cnlwaTVKMXRLJTJCTHRhJTJCTXVyV1Z5TVdxMU5TJTJGMGRUQnVMMm9qcFIzfGVufDB8MHx8fDE3MjM0MDU0MTR8MA&ixlib=rb-4.0.3&q=80&w=1080"
                        class="h-full transition-all delay-300 duration-400 ease-in w-full absolute group-hover:scale-105 object-center">
                    <div class="absolute p-8 z-50 gap-4 flex flex-col justify-end bg-opacity-45 h-full w-full bottom-0">
                        <span class="text-[20px] sm:text-[24px] text-white md:text-[28px] font-canela">
                            Hover Card to see Magic
                        </span>
                        <p class="group-hover:block text-white text-[14px] hidden">
                            
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio accusantium dolores, in cumque labore non assumenda necessitatibus vel at voluptates deleniti minus nesciunt nobis repellendus dolorum blanditiis ex magni impedit?

</p>
                        <a href="contactus.html" class="flex items-center gap-2">
                            
                            <div
                                class="flex group-hover:bg-secondary justify-center items-center rounded-full bg-primary min-h-10 min-w-10 max-h-10 max-w-10">
                                <img src="https://images.unsplash.com/photo-1595239244990-b609da3d95f2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxkYXRhJTNBaW1hZ2UlMkZibXAlM0JiYXNlNjQlMkNRazMyQkFBQUFBQUFBRFlBQUFBb0FBQUFDQUFBQUFnQUFBQUJBQmdBQUFBQUFNQUFBQUFUQ3dBQUV3c0FBQUFBQUFBQUFBQUFvWnRhbnBaTm9aTTR0S05KeTd0dzBjV0Z1clYlMkZpcEJqcDZSMW41dGtsSTQlMkZvWmxLdkxWNXlNT1R0TFNLaFl0Z3I2Mk1vYUY1aUl0Tmk1RlRxN0NJdnNLa3I3T1dnSVpkdGJPYXBhYUhobzVnaEpKbnBMS1l1Y1N5ckxTZ2ZvVmZ0N1dkcXF1T2s1bDBrcDklMkZyTHFudk1pN3JiYW1nSWRtdDdPWHNLMlBwYWFGckxHV3ZzYTB4YzYlMkZzYm1vaG8xdXRiQ1BzNiUyQk50YkdSd0wlMkJsenRDOHp0TEJ0cnlwaTVKMXRLJTJCTHRhJTJCTXVyV1Z5TVdxMU5TJTJGMGRUQnVMMm9qcFIzfGVufDB8MHx8fDE3MjM0MDU0MTR8MA&ixlib=rb-4.0.3&q=80&w=1080" class="w-[28px] h-8  rounded-full overflow-hidden" alt="" />
                            </div>
                            <h2 class="font-bold text-[16px] text-white">Contact Us
                            </h2>
                        </a>
                    </div>
                    <div
                        class="absolute transition-all duration-400 ease-in bg-gradient-to-b from-transparent to-black min-h-[650px] text-white bottom-0 group-hover:bottom-0 group-hover:min-h-[900px] w-full z-30">
                    </div>
                </div>

Related Examples

Glowing gradient border
on hover glow border

Prashant

4 years ago

26.3k
Border gradient

Samuel Dawson

3 years ago

17.6k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

2 years ago

20.1k
Contact us form with map
Contact us form with map

Chithira Kumar M

2 years ago

13k
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Anonymous

2 years ago

28.4k
Onhover underline effect

Dika Rahman

2 years ago

4.4k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

12.9k
Animated cards

Michael Andreuzza

2 years ago

7.4k
Feature Card

Md. Tofayel islam

1 year ago

2.1k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Robert Chunga

1 year ago

3.3k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Ragnar lodbrok

1 year ago

2.3k