Hello developers, today in this blog you will learn to create Product Card Design with Hover effect using HTML & CSS.
The product card is used to display an image of the product, a description of the product, a button to order or purchase, a star rating of the product, etc. These details help the visitors to buy the product. Hence, these contents must be on the product card.
In this blog (Product Card Design with Hover effect), there is a card at the center of the webpage. There are two parts to the card. Namely, the left part and right part. The left part of the card contains the heading, star rating, and a button. When you hover the button, the icon of the button changes from 'Price' to 'Shopping Card'. This effect is made by using the CSS transform property. The right part of the card contains an image. On hovering the image, a list with background color will slide from the left side. It consists of a list of items with the product value. The hover effect has been used in the button and the image.
The source code of this project is given below, if you want the source code of this program, you can copy it. You can use these Product Card Designs with hover effect, with your creativity and, can take this project to the next level.
Product Card Design with Hover effect [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bree+Serif&family=EB+Garamond:ital,wght@0,500;1,800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
transition: all .2s linear;
}
.sec {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
background: #f9f9f9;
letter-spacing: 2px;
}
#product {
background: linear-gradient(to right bottom,#cc231e,#f5624d);
background-size: 100vw 100vh;
}
#container {
position: relative;
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
background: rgba(255, 255, 255, 0.9);
text-align: center;
border-radius: 5px;
overflow: hidden;
height: 450px;
width: 900px;
font-size: 30px;
}
.product-details {
position: relative;
text-align: left;
overflow: hidden;
padding: 30px;
height: 100%;
float: left;
width: 40%;
}
#container .product-details h1 {
font-family: 'Bebas Neue', cursive;
display: inline-block;
position: relative;
font-size: 30px;
color: #00216f;
margin: 0;
}
#container .product-details h1:before {
position: absolute;
content: '';
right: 0%;
top: 0%;
transform: translate(25px, -15px);
font-family: 'Bree Serif', serif;
display: inline-block;
background: #ffe6e6;
border-radius: 5px;
font-size: 14px;
padding: 5px;
color: white;
margin: 0;
}
.hint-star {
display: inline-block;
margin-left: 0.5em;
color: gold;
width: 50%;
}
#container .product-details > p {
font-family: 'EB Garamond', serif;
padding-top: 25px;
text-align: center;
font-size: 18px;
color: #7d7d7d;
}
.control {
position: absolute;
left: 22.8%;
margin-top: 40px;
}
.btn {
transform: translateY(0px);
transition: 0.3s linear;
background: #34a65f;
border-radius: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
outline: none;
border: none;
color: #fff;
padding: 0;
margin: 0;
}
.btn:hover {
transform: translateY(-6px);
background: #4c9a2a;
}
.btn span {
font-family: 'Farsan', cursive;
transition: transform 0.3s;
display: inline-block;
padding: 10px 20px;
font-size: 1.2em;
margin: 0;
}
.btn .price, .shopping-cart {
background: #333;
border: 0;
margin: 0;
}
.btn .price {
transform: translateX(-10%);
padding-right: 15px;
}
.btn .shopping-cart {
transform: translateX(-100%);
position: absolute;
background: #333;
z-index: 1;
left: 0;
top: 0;
}
.btn .buy {
z-index: 3;
font-weight: bolder;
}
.btn:hover .price {
transform: translateX(-110%);
}
.btn:hover .shopping-cart {
transform: translateX(0%);
}
.product-image {
transition: all 0.3s ease-out;
display: inline-block;
position: relative;
overflow: hidden;
height: 100%;
float: right;
width: 50%;
display: inline-block;
}
#container img {
width: 100%;
height: 100%;
}
.info {
background: rgba(27, 26, 26, 0.9);
font-family: 'Bree Serif', serif;
transition: all 0.3s ease-out;
transform: translateX(-100%);
position: absolute;
line-height: 1.8;
text-align: left;
font-size: 15px;
color: #FFF;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.info h2 {
text-align: center;
margin-bottom: 30px;
}
.product-image:hover .info {
transform: translateX(0);
}
.info ul li {
transition: 0.3s ease;
margin: 10px 0 0 50px;
}
.info ul li:hover {
transform: translateX(50px) scale(1.3);
}
.product-image:hover img {
transition: all 0.3s ease-out;
}
.product-image:hover img {
transform: scale(1.2, 1.2);
}
.credit a {
text-decoration: none;
font-weight: 800;
color: tomato;
}
.credit {
margin-top: 10px;
font-family: 'EB Garamond', serif;
text-align: center;
font-size: 15px;
color: #000;
letter-spacing: normal;
}
Thank you for reading our blog. If you face any problem in creating this Product Card Design with a Hover effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team