Hello coders, hope you liked the last blog post in which we talked about how can we create the HTML structure of this beautiful template if not just check this post:https://codewithmahattva.blogspot.com/2021/07/hover-shopping-card-tutorial-using-css.html
So in This blog, we will make our template more sensible and attractive. So let's write. The CSS in this project is a bit complex as it includes various components, functions, and aesthetic animations, But don't worry we hear to do that all for you This project can be flex in your resume.
If you haven't read the last blog I would strongly recommend you to go and read the blog and go Through the components.
The Source code is given below:-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #131313;
}
.container
{
position: relative;
}
.container .card
{
position: relative;
width: 320px;
height: 450px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .card:before
{
content: '';
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(236, 13, 13);
clip-path: circle(150px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before
{
clip-path: circle(300px at 80% -20%);
}
.
.container .card:after
{
content: 'Adidas';
position:absolute;
background-position: center;
top: 50%;
left: -3%;
font-size: 6em;
font-weight: 1000;
font-style: italic;
font: bold;
color: rgba(255, 255,255, 0.04);
}
.container .card .imgbox
{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
width: 100%;
height: 220px;
transition: 0.5s;
}
.container .card:hover .imgbox
{
top: 0%;
transform: translateY(0%);
}
.container .card .imgbox img
{
position:absolute;
top: 21%;
left: 20px;
transform: rotate(-20deg);
width: 270px;
}
.container .card:hover .imgbox img
{
animation-name: bounce;
animation-timing-function: ease;
animation-iteration-count: initial;
animation-duration: 3s;
}
@keyframes bounce{
0% {
transform: rotate(-20deg);
} 10% {
transform: translateY(-20px);
} 50% {
transform: translateY(0);
} 75% {
transform: translateY(-20px);
} 100% {
transform: rotate(-20deg);
}
}
.container .card .imgbox2 img
{
position: absolute;
margin-top: 193px;
width: 346px;
left: -7px;
height: 239px;
opacity: 0.50;
visibility: hidden;
}
.container .card:hover .imgbox2 img
{
transform:translateY(-0%) ;
visibility: visible;
}
.container .card .contentbx
{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
transition: 1s;
z-index: 10;
}
.container .card:hover .contentbx
{
height: 210px;
}
.container .card:hover .contentbx h2
{
position: relative;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.container .card .contentbx .size,
.container .card .contentbx .color
{
display: flex;
justify-content: center;
align-items: center;
padding: 8px 2px;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .contentbx .size
{
opacity: 1;
visibility: visible;
transition-delay: 0.5s;
}
.container .card:hover .contentbx .color
{
opacity: 1;
visibility: visible;
transition-delay: 0.6s;
}
.container .card .contentbx .size h3,
.container .card .contentbx .color h3
{
color: #fff;
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 10px;
}
.container .card .contentbx .size span
{
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
font: bold;
display: inline-block;
color: #111;
background: rgb(2, 1, 1);
margin: 0 5px;
transition: 0.5s;
color: rgb(207, 31, 31);
}
.container .card:hover .contentbx .size span:hover
{
background:#4e0b75 ;
}
.container .card .contentbx .color span
{
width: 20px;
height: 20px;
background: #ff0;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.container .card .contentbx .color span:nth-child(2)
{
background: #9bdc28;
}
.container .card .contentbx .color span:nth-child(3)
{
background: #03a9f4;
}
.container .card .contentbx .color span:nth-child(4)
{
background: #fa0b0b;
}
.container .card .contentbx a
{
display: inline-block;
padding: 10px 20px;
background: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
font-weight: 600;
color: #111;
opacity: 0;
transform: translateY(50px);
transition: 0.5s;
}
.container .card:hover .contentbx a
{
opacity: 1;
transform: translateY(0px);
transition-delay: 0.75s;
}
This is a really innovative Template that will help you later to get ideas. So keep Coding.
ALL THE BEST!!
