CSS Background Color Animation Effect With Coding Example | HTML CSS Tutorial For Beginners
Learn how to create an Animated eCommerce Product Card using only HTML, and CSS. If you want to create a website with an amazing hover animation? or you have just learned the basics of HTML & CSS and now you're trying to learn more about CSS tips and tricks then this one is for you! 🚀
Step 1: First of all you need to create a folder on your computer then create a file called index.html where you are going to code your HTML.
<!DOCTYPE html>
<html lang="en">
<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 UI Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="img-box">
<img src="shoe.jpg" alt="shoe">
</div>
<div class="details">
<h3>Nike Air Max <br><span>Men's Shoe</span></h3>
<h4>Product Details</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti porro!</p>
<h4>Size</h4>
<ul class="size">
<li>36</li>
<li>38</li>
<li>40</li>
<li>42</li>
<li>44</li>
</ul>
<div class="price">
<h2><sup>$</sup>199<small>.99</small></h2>
<a href="#">Add to Bag</a>
</div>
</div>
</div>
</body>
</html>
 |
| Download this image and save it as shoe.jpg in your folder |
Sidebar Menu using HTML, CSS & JavaScript | How To Create Side Navigation Menu?
Step 2: Now go to your folder again and create a new file called style.css where you are going to code your CSS (Cascading Style Sheet) code.@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:
ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#00b4d8, #00b4d8 50%, #fff 50%, #fff 100%);
}
.card
{
position: relative;
width: 300px;
height: 380px;
background: #000;
box-shadow: 0px 15px 45px rgba(0,0,0,0.1);
display: flex;
transition: 0.5s ease-in-out;
}
.card:hover{
width: 600px;
}
.card .img-box
{
position: relative;
min-width: 300px;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 2;
}
.card .img-box img
{
max-width: 250px;
transition: 0.5s ease-in-out;
}
.card:hover .img-box img
{
transform: rotate(-35deg) translate(-20px);
}
.card .details
{
position: absolute;
left: 0;
min-width: 300px;
height: 100%;
background: #00b4d8;
display: flex;
justify-content: center;
/* align-items: center; */
padding: 20px;
flex-direction: column;
z-index: 1;
transition: 0.5s ease-in-out;
}
.card:hover .details{
left: 300px;
}
.card .details::before
{
content: '';
position: absolute;
left: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
}
.card .details h3
{
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 1.5em;
line-height: 1em;
}
.card .details h3 span{
font-size: 0.65em;
font-weight: 300;
text-transform: none;
opacity: .85;
}
.card .details h4{
color: #fff;
text-transform: uppercase;
font-size: 0.9em;
font-weight: 600;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1em;
}
.card .details p{
color: #fff;
font-size: 0.8em;
opacity: 0.85;
}
.card .details .size{
display: flex;
gap: 10px;
}
.card .details .size li{
list-style: none;
color: #fff;
font-size: 0.9em;
font-weight: 500;
border: 1px solid #fff;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.85;
cursor: pointer;
}
.card .details .size li:hover{
color: #00b4d8;
opacity: 1;
background: #fff;
}
.card .details .price{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.card .details .price h2{
color: #fff;
font-weight: 600;
font-size: 2em;
}
.card .details .price h2 sup{
font-weight: 300;
}
.card .details .price h2 small{
font-size: 0.75em;
}
.card .details .price a{
display: inline-flex;
padding: 10px 20px;
background: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
color: #00b4d8;
}
After that open it on your Visual Studio Code Copy the CSS code and paste it to your editor then save it by using the keyboard shortcut CTRL+S.
Step 3: Now you are ready to test the code. Go to your folder again and open your index.html file with Google Chrome Browser.
If you get any error in your code and you are just stuck on it then please go to our Facebook Group and create a post with a screenshot and problem details.
Happy Learning!
0 Comments