<section>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="cover item-a">
<h1>Little<br>Bonsai</h1>
<span class="price">$79</span>
<div class="card-back">
<a href="#">Add to cart</a>
<a href="#">View detail</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="cover item-b">
<h1>Tropical<br>Leaf</h1>
<span class="price">$35</span>
<div class="card-back">
<a href="#">Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="cover item-c">
<h1>Marijuana<br>Chill</h1>
<span class="price">$155</span>
<div class="card-back">
<a href="#">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap');
$transition-time: 2.3s;
body{
font-family: 'Oswald', sans-serif;
background-color: #212121;
section{
width: 90%;
max-width: 1200px;
margin: 0 auto;
.row{
align-items: center;
height: 100vh;
}
}
}
.card{
position: relative;
height: 400px;
width: 100%;
margin: 10px 0;
transition: ease all $transition-time;
perspective: 1200px;
&:hover{
.cover{
transform: rotateX(0deg) rotateY(-180deg);
&:before{
transform: translateZ(30px);
}
&:after{
background-color: black;
}
h1{
transform: translateZ(100px);
}
.price{
transform: translateZ(60px);
}
a{
transform: translateZ(-60px) rotatey(-180deg);
}
}
}
.cover{
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: ease all $transition-time;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
&:before{
content: '';
position: absolute;
border: 5px solid rgba(255,255,255,.5);
box-shadow: 0 0 12px rgba(0,0,0,.3);
top:20px;
left:20px;
right:20px;
bottom:20px;
z-index: 2;
transition: ease all $transition-time;
transform-style: preserve-3d;
transform: translateZ(0px);
}
&:after{
content: '';
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
z-index: 2;
transition: ease all 1.3s;
background: rgba(0,0,0,.4);
}
&.item-a{
background-image: url('https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80');
}
&.item-b{
background-image: url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80');
}
&.item-c{
background-image: url('https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80');
}
h1{
font-weight: 600;
position: absolute;
bottom: 55px;
left: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all $transition-time;
z-index:3;
font-size: 3em;
transform: translateZ(0px);
}
.price{
font-weight: 200;
position: absolute;
top: 55px;
right: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all $transition-time;
z-index:4;
font-size: 2em;
transform: translateZ(0px);
}
}
.card-back{
position: absolute;
height: 100%;
width: 100%;
background: #0b0f08;
transform-style: preserve-3d;
transition: ease all $transition-time;
transform: translateZ(-1px);
display: flex;
align-items: center;
justify-content: center;
a{
transform-style: preserve-3d;
transition: ease transform $transition-time, ease background .5s;
transform: translateZ(-1px) rotatey(-180deg);
background: transparent;
border: 1px solid white;
font-weight: 200;
font-size: 1.3em;
color: white;
padding: 14px 32px;
outline: none;
text-decoration: none;
&:hover{
background-color: white;
color: #0b0f08;
}
}
}
}
View Compiled
/*nope*/
This Pen doesn't use any external JavaScript resources.