create shopping card UI using html and css with hover effect
Shopping Card with Expandable Hover Effect
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="product">
<div class="imgbox">
<img src="https://images.sportsdirect.com/images/products/62310640_l.jpg">
</div>
<div class="details">
<h2>Brand Name</br><span>Mens Designer T-shirt</span></h2>
<div class="price">Rs. 1099</div>
<label>Sizes</label>
<ul>
<li>XS</li>
<li>S</li>
<li>M</li>
<li>XL</li>
<li>XXL</li>
</ul>
<label>Colors</label>
<ul class="colors">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="#">Add to Cart</a>
</div>
</div>
</body>
</html>
CSS Code(style.css)
body{
margin:0;
padding:0;
background-color:#0CF;
font-family:sans-serif;
}
.product{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:240px;
height:340px;
background:#fff;
border-radius:15px;
box-shadow: 0 5px 15px rgba(0,0,0,.25);
overflow:hidden;
}
.product .imgbox{
height:100%;
box-sizing:border-box;
}
.imgbox img{
width:100%;
display:block;
margin:20px auto 0;
}
.details{
position:absolute;
width:100%;
bottom:-145px;
background:#fff;
padding:10px;
box-sizing:border-box;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: .5s;
}
.details h2{
margin:0;
padding:0;
font-size:16px;
width:100%;
}
.details h2 span{
font-size:12px;
color:#ccc;
font-weight:normal;
}
.details .price{
position:absolute;
top:10px;
right:20px;
font-weight:bold;
font-size:20px;
}
label{
display:block;
margin-top:5px;
font-weight:bold;
font-size:14px;
}
ul{
display:flex;
margin:0;
padding:0;
}
ul li{
list-style-type:none;
margin: 5px 5px 0;
font-size:12px;
font-weight:bold;
}
ul li:first-child{
margin-left:0;
}
ul.colors li{
width:16px;
height:16px;
}
ul.colors li:nth-child(1){
background-color:yellow;
}
ul.colors li:nth-child(2){
background-color:red;
}
ul.colors li:nth-child(3){
background-color:green;
}
ul.colors li:nth-child(4){
background-color:orange;
}
ul.colors li:nth-child(5){
background-color:lightblue;
}
a{
display:block;
padding:5px;
color:#fff;
margin:15px;
background:#ff4faf;
text-align:center;
text-decoration:none;
transition: .3s;
}
a:hover{
color:#000;
}
.product:hover .details{
bottom:0;
}
Comments
Post a Comment