CSS Product Cards with Text Overlay Animation

CSS Product Cards with text overlay

When we enter an e-commerce website, we see some organized boxes or rectangles that contain an image, a short description, a price, and in some cases a rating or review. These boxes are called product cards or CSS product cards. Today we will create some basic product cards and give them text overlay animation. This CSS animation example is created with HTML and CSS. If we hover over the images of this snippet, the product name and price will appear from the left side with a black overlay. The following video tutorial demonstrates the procedure of making this Product card animation.

Video Tutorial:

By watching the video above you can understand how this CSS Product Cards with Text Overlay Animation Snippet is created. Product cards are useful elements for websites. Through this the customer gets a rough idea about a product before buying it. It also encourages them to buy the product. Each product card or CSS product card should be designed to catch the buyer's eye. The user will be more drawn in if there is a great product image, affordable pricing, a brief product description, and if there is CSS animation.

Online shops can be found all around in the modern digital world. According to a recent survey, over 20% of consumers prefer to purchase online. These product cards are used on so many websites. Among these, Amazon, eBay, and Etsy are notable. Additionally, the clothing retailer Zara and the meal delivery service UderEats draw people in with eye-catching product cards.

You may Also Like:

CSS Product Cards with Text Overlay Animation [ Source Code ]:

HTML and CSS Files are required to create these CSS Product Cards with Text Overlay Animation Snippet. After creating, copy the source code below and paste it into the files. If there is any problem then download the code from the download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en"> 
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card Text overlay animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="content-area">
            <div class="single-content">
                <img src="img/1.jpg" alt="">
                <div class="info">
                    <h2>Product One</h2>
                    <p>Best Deal - $35</p>
                </div>
            </div>

            <div class="single-content">
                <img src="img/2.jpg" alt="">
                <div class="info">
                    <h2>Product Two</h2>
                    <p>Best Deal - $55</p>
                </div>
            </div>

            <div class="single-content">
                <img src="img/3.jpg" alt="">
                <div class="info">
                    <h2>Product Three</h2>
                    <p>Best Deal - $75</p>
                </div>
            </div>            
        </div>
    </div>
    
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}
body{
    background: #00b38c;
    width: 100%;
    min-height: 100vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    width: 90%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 80px 0;
}
.single-content{
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 40px;
    box-shadow: 0 2px 20px 2px rgba(0,0,0,0.3);
}

.single-content::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    opacity: 0;
}
.single-content:hover::after {
	position: absolute;
    content: '';
    transform: translateY(0);
	background: linear-gradient(35deg, rgba(0, 0, 46, 0.8) 25%, rgba(0, 0, 46, 0));
	z-index: 2;
	width: 100%;
	height: 100%;	
	top: 0;
	left: 0;
	opacity: 1;	
}
.single-content img{
    object-fit: cover;
    min-height: 100%;
    height: auto;
    transition: all 0.5s ease;
    width: 100%;
    height: auto;    
}
.single-content:hover img{
    transform: scale(1.3) translate(10%, 10%);
}
.single-content .info{
    position: absolute;
    z-index: 3;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-105%);
    transition: all 0.4s ease;
    left: 5%;
    right: 5%;
    bottom: 5%;
    padding: 10px 12px;
    border-left: 4px solid #fff;
    color: #ffffff;    
}
.single-content:hover .info{
    opacity: 1;
    transform: translateX(0);
}
.single-content .info h2 {
    text-transform: uppercase;
	letter-spacing: 3px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 23px;
	margin-bottom: 10px;	
}
.single-content .info h2, 
.single-content .info p{
    transition: all 0.7s ease;
    transform: translateX(-100%);   
    overflow: hidden;
}
.single-content:hover .info h2, 
.single-content:hover .info p{
    transform: translateX(0);
}
.single-content .info p{
    font-size: 13px;
    line-height: 17px;
}

Hope the code works. Our website has many snippets on CSS Animation Examples, Bootstrap Website Design, JavaScript Projects, etc. You will get them by clicking on the Load More button on the homepage. If you find our website content useful, please share it with others. Thanks for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box