CSS Responsive Product Card Hover Effects

Hello friends, Today, we are going to share an interesting and beautiful snippet about the Product Card Hover Animation. In this tutorial, we will learn how to create a CSS Image hover with a text gradient overlay effect. In order to have a good idea about the project, you need to watch the video tutorial below. There are lots of videos on CSS animation examples, full website projects, Javascript snippets, jquery plugin implementation, and other things on our YouTube channel. If you are a beginner or have just recently started, this channel may help you. If you find it helpful, please subscribe.

After watching this video, I hope you have got some ideas. Now, what are product cards? Product cards are meant to summarize product information, so they should only include the most important information. This type of card can be found on e-commerce websites. A card with animation looks more fun and engaging to users. So you can add this kind of overlay animation to give it a different look.

Each card in the project has a picture of a product and the name of the product below it. A call-to-action button and a short description of the product will show up when we hover. Lifting the hover will get it back to where it was before. To make this animation we used CSS transform translate property which you can clearly understand by watching the video above. We used the CSS Flexbox layout method to make the product card hover project. We also used CSS Media Queries to make the project responsive. As a result, product cards can be viewed vertically instead of horizontally on small devices.

You may also like:

CSS Responsive Product Card Hover Effects [ Source Code ]:

After creating the HTML and CSS file, copy the code from the code box below and paste it into your project. Open it in your browser and see if it works. If for some reason it doesn't work then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Profile Card Hover Effect using Flexbox</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css"> 
</head> 
<body>
    <div class="wrapper">
        <div class="services">
        <a href="#">
            <span class="single-img img-one">
                <span class="img-text">
                    <h4>Canon 9587</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quam.</p>
                    <button>Buy Now</button>
                </span>
            </span>
        </a>
        <a href="#">
            <span class="single-img img-two"> 
                <span class="img-text">
                    <h4>Nikon 3458</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quam.</p>
                    <button>Buy Now</button>
                </span>
            </span>
        </a>
        <a href="#">
            <span class="single-img img-three">
                <span class="img-text">
                    <h4>Sony 1234</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quam.</p>
                    <button>Buy Now</button>
                </span>
            </span>
        </a>
    </div>
    </div>
</body>
</html>

ADD CSS:

body{
    background: #252525;
}
a{
    text-decoration: none;
}
.wrapper{
    padding: 125px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.services{
    width: 1100px;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
.single-img{
    border-radius: 5px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 325px;
    height: 450px;
    overflow: hidden;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
    transform: translate(0, 0);
    transition: .3s;
}
.single-img:hover{
    transform: translate(0, -9px);
}
.img-one{
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center center;
}
.img-two{
    background-image: url(3.jpg);
    background-size: cover;
    background-position: center center;
}
.img-three{
    background-image: url(2.jpg);
    background-size: cover;
    background-position: center center;
}
.img-text{
    background: linear-gradient(to top,rgba(255,255,255,0.9),rgba(255,255,255,0));
    padding: 0 10px 5px 10px;
    width: 100%;
    height: auto;
    position: relative;
    transform: translate(0, 110px);
    line-height: 25px;
    transition: 0.5s ease;
    display: inline-block;
    text-align: center;
    color: #fff;
}
.img-text h4{
    line-height: 15px;
    padding: 0;
    margin: 16px 0;
    font-family: 'Alfa Slab One', cursive;
    font-size: 25px;
}
.services button{
    background: #252525;
    color: #fff;
    padding: 10px 35px;
    border: none;
    border-radius: 50px;
    line-height: 14px;
    display: inline-block;
    margin-bottom: 10px;
}
.single-img:hover .img-text{
    transform: translate(0, 0);
}

@media (max-width: 991px){
    .wrapper{
        padding: 0;
    }
    .services{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    a{
        margin-bottom: 35px;
    }
}

Hope your code is working properly. If you want to get more such codes, click on the Load More button at the bottom of our homepage. Thank you for visiting our website.

DOWNLOAD CODE

CSS Responsive Product Card Hover Effects [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Responsive Product Card Hover Effects

CSS Responsive Product Card Hover Effects [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form