<div class="product-container">
<div class="product-card">
<div class="card-img">
<img src="http://www.androidmarket.es/wp-content/uploads/alltext-hd-watch-face-2.png">
</div>
<div class="card-info">
<h2 class="name">
Simple
<br>
Gray
</h2>
<h3 class="price">$99.99</h3>
<span class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</span>
<p></p>
</div>
<div class="card-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra ornare eros in imperdiet. </p>
<div class="prod-quant">
<span>Quantity</span>
<span class="prod-qty">
<i class="fa fa-angle-left remove"></i>
<span class="qty-value">
<span>1</span>
</span>
<i class="fa fa-angle-right add"></i>
</span>
</div>
<div class="prod-cta-order">
<h4 class="cta-text">
<i class="fa fa-cart-plus"></i>
ADD TO CART
</h4>
</div>
</div>
</div>
<!-- <div class="product-card-2">
<div class="image-section">
<div class="card-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Nexus_4.png">
</div>
</div>
<div class="content-section">
<div class="card-info">
<h2 class="name">
CoolPhone
</h2>
<h4 class="brand">Samxung</h4>
<div class="values">
<h3 class="price">$134.99</h3>
</div>
<p></p>
</div>
<div class="card-description">
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra ornare eros in imperdiet. </p>
<p class="label">Features</p>
<div class="features">
<li>Procesador DualCore 1.3GHz</li>
<li>Android Kit Kat 4.4</li>
<li>4GB ROM+512MB RAM</li>
<li>Bluetooth/WiFi/GPS/3G</li>
</div>
<div class="prod-quant">
<span>Quantity</span>
<span class="prod-qty">
<i class="fa fa-angle-left remove"></i>
<span class="qty-value">
<span>1</span>
</span>
<i class="fa fa-angle-right add"></i>
</span>
</div>
<div class="prod-cta-order">
<h4 class="cta-text">
<i class="fa fa-cart-plus"></i>
ADD TO CART
</h4>
</div>
</div>
</div>
</div> -->
</div>
*{
box-sizing: border-box;
}
.product-container{
width: 100%;
height: auto;
background: #EEEEEE;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: 300;
overflow: auto;
&:before{
content: "";
position: fixed;
width: 650px;
height: 800px;
top: -100px;
left: -140px;
background: #d5685e;
border-radius: 50%;
}
.product-card{
width: 400px;
height: 450px;
max-width: 650px;
min-height: 400px;
max-height: 450px;
background: white;
box-shadow: 0px 5px 6px -3px rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 15px 0;
transition: all 0.4s ease-in 0.2s;
z-index: 999;
&:hover{
width: 650px;
.card-img{
right: 225px;
}
.card-description{
opacity: 1;
right: 0%;
}
}
.card-img{
width: 200px;
height: 100%;
position: absolute;
right: 15px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease-in 0.2s;
img{
width: 250px;
height: auto;
}
}
.card-info{
//background: red;
transition: all 0.6s ease-in 0.2s;
position: absolute;
left: 0%;
top: 0;
bottom: 0;
width: 200px;
display: flex;
padding-left: 25px;
justify-content: center;
flex-direction: column;
.name{
font-family: "Roboto", sans-serif;
font-size: 56px;
font-weight: 900;
line-height: 1;
color: #666;
margin: 0;
}
.price{
font-family: "Roboto", sans-serif;
color: #666;
font-weight: 400;
font-size: 16px;
margin: 10px 0;
}
.rating i{
color: #d5685e;
font-size: 14px;
}
}
.card-description{
//background: red;
transition: all 0.5s ease-in 0.1s;
position: absolute;
right: -100%;
opacity: 0;
top: 0;
bottom: 0;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-right: 15px;
p{
text-align: center;
padding: 0 10px;
font-family: "Roboto", sans-serif;
color: #666;
font-weight: 300;
font-size: 14px;
}
.prod-quant{
border-top: 1px solid #d5685e;
width: 60%;
padding: 8px 0;
display: flex;
flex-direction: column;
justify-content: center;
span{
font-size: 15px;
font-weight: 400;
color: #888;
text-align: center;
}
.prod-qty{
display: flex;
align-items: center;
justify-content: center;
margin-top: 8px;
i{
font-size: 14px;
}
.add,.remove{
cursor: pointer;
transition: all 0.2s ease-in;
background: #666;
color: white;
border: none;
&:hover{
background: #d5685e;
}
}
.add{
border-left: none;
width: 25px;
height: 25px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.remove{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-right: none;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.qty-value{
background: #f6f6f6;
border: 1px solid #d8d8d8;
min-width: 40px;
width: auto;
height: 25px;
//border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
span{
color: #666;
font-size: 14px;
padding: 0;
margin: 0;
}
}
}
}
.prod-cta-order{
background: #d5685e;
padding: 8px 15px;
margin: 8px 0 0 0;
border-radius: 0px;
cursor: pointer;
transition: all 0.3s ease-in-out;
vertical-align: middle;
&:hover{
background: darken(#d5685e,10%);
}
h4{
margin: 0;
color: white;
pading: 10px;
i{
margin-right: 4px;
}
}
}
}
}
.product-card-2{
width: 650px;
height: 450px;
max-width: 650px;
min-height: 400px;
max-height: 450px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 15px 0;
perspective: 500px;
.image-section{
width: 250px;
height: 90%;
background: #f5f5f5;
border: 1px solid #f3f3f3;
//animation: slide-in .8s ease-in-out 1s forwards;
position: absolute;
left: 0%;
//transform: rotateY(-90deg);
transform-origin: 100% 100%;
.card-img{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
img{
width: auto;
height: 300px;
}
}
}
&:hover .content-section{
transform: translateX(28%);
}
.content-section{
position: relative;
right: 0;
width: 400px;
height: 100%;
background: white;
box-shadow: -2px 2px 6px 0px rgba(0,0,0,0.5);
padding: 20px;
transform: translateX(0%);
transition: all 0.4s ease-in-out .5s;
.name ,.brand ,.price{
font-family: "Roboto", sans-serif;
color: #666;
margin: 0;
padding: 0;
}
.name{
margin-bottom: 8px;
}
.rating,.label{
color: #d5685e;
font-size: 16px;
font-weight: 400;
}
.price{
//font-size: 18px;
font-weight: 400;
text-align: right;
margin-bottom: 8px;
}
.values{
position: absolute;
right: 20px;
top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-description{
.desc{
border-top: 1px solid #dddddd;
padding-top: 8px;
font-weight: 400;
color: #555;
margin-bottom: 16px;
}
.features{
}
}
}
}
}
@keyframes slide-in{
0%{
transform: rotateY(-90deg);
}
100%{
transform: rotateY(0deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.