<div class="container">
<div class="card">
<div class="image">
<img src="https://i.postimg.cc/dt5mQhQS/shoe.png" alt="shoes">
</div>
<div class="content">
<h2>Nike Shoes</h2>
<div class="size">
<h3>SIZE : </h3>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div class="color">
<h3>COLOR :</h3>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="#"> <button id="press"> Buy Now </button></a>
</div>
</div>
</div>
</body>
</html>
*{
padding: 0px;
margin: 0px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #131313;
}
.container{
position: relative;
}
.container .card{
width: 320px;
height: 450px;
position: relative;
/* transform: translate(-50%, -50%); */
border-radius: 5px;
overflow: hidden;
background-color: rgb(58, 56, 56);
}
.container .card::before{
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
clip-path: circle(150px at 80% 20%);
background: #D05353;
transition: 0.5s ease-in-out;
}
.container .card:hover:before{
clip-path: circle(300px at 80% -20%);
}
.container .card::after{
content: 'Nike';
top: 40%;
left: -10%;
position: absolute;
font-weight: 800;
font-size: 12em;
font-style: italic;
color: rgba(255,255,255,0.04);
}
.container .card .image{
position:absolute;
top:50%;
z-index: 10000;
transform: translateY(-50%);
width:100%;
height: 250px;
transition: 0.5s ease-in-out;
}
.container .card:hover .image{
top: 0%;
transform: translateY(0%);
cursor: pointer;
}
.container .card .image img{
position: absolute;
top: 40%;
left: 43%;
transform: translate(-50%, -50%) rotate(-25deg);
width: 250px;
}
.container .card .content{
position: absolute;
bottom: 0%;
width: 310px;
height: 100px;
text-align: center;
transition: 1s;
z-index: 10;
}
.container .card:hover .content{
height: 210px;
}
.container .card .content h2{
position: relative;
font-weight: 600;
letter-spacing:1px;
color: #fff;
}
.container .card .content .size{
display: flex;
justify-content: center;
align-items: center;
padding: 8px 2px;
transition: 0.2s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .content .size{
opacity: 1;
visibility: visible;
}
.container .card .content .color{
display: flex;
justify-content: center;
align-items: center;
padding: 8px 2px;
transition: 0.2s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .content .color{
opacity: 1;
visibility: visible;
}
.container .card .content .size h3, .container .card .content .color h3{
font-weight: 300;
font-size: 14px;
margin-right: 10px;
color: #fff;
letter-spacing:2px;
text-transform: uppercase;
}
.container .card .content .size span{
width: 26px;
height: 26px;
text-align: center;
display: inline-block;
font-size: 14px;
line-height: 26px;
color: #111;
background: #fff;
margin: 0 5px;
transition: 0.5s;
/* border-radius: 5px; */
cursor: pointer;
}
.container .card .content .size span:hover
{
background: rgb(228, 192, 125);
}
.container .card .content .color span {
width:20px;
height:20px;
margin: 0 5px;
border-radius: 50%;
}
.container .card .content .color span:nth-child(2){
background-color:#07ac38 ;
}
.container .card .content .color span:nth-child(3){
background-color:#FB8500 ;
}
.container .card .content .color span:nth-child(4){
background-color: #990808;
}
.container .card .content .color span:nth-child(5){
background-color:rgb(0, 208, 255);
}
.container .card .content a{
display: inline-block;
/* padding: 10px 20px; */
font-weight: 600;
background-color: #fff;
text-decoration: none;
border-radius: 4px;
margin-top: 10px;
opacity: 0;
transform: translateY(50px);
transition: 0.2s;
}
.container .card:hover .content a{
transform: translateY(0%);
opacity:1;
}
.container .card .content a #press{
position: relative;
font-size: 14px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.