<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<div id="outer-div">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://pmcvariety.files.wordpress.com/2015/08/rugrats.jpg?w=670&h=377&crop=1" alt="" />
<div class="image_overlay"></div>
<div id="view_details"><span class="glyphicon glyphicon-play"></span></div>
<div class="stats">
<div class="stats-container">
<span class="product_name">Animation Premiers</span>
<p>Action Prime Time Premiers 2016</p>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
/* Generals resets and unimportant stuff */
* {
margin: 0px;
padding: 0px;
}
body {
background:#eee;
font-family: "Open Sans", sans-serif;
}
/* --- Product Card ---- */
#outer-div {
position: relative;
perspective: 800px;
width: 340px;
height: 500px;
transform-style: preserve-3d;
transition: transform 5s;
position: absolute;
top: 20px;
left: 50%;
margin-left: -167px;
}
#product-front{
width: 335px;
height: 500px;
background: #fff;
position: absolute;
left: -5px;
top: -5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-card.animate #product-front{
top: 0px;
left: 0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-card {
width: 325px;
height: 290px;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
#product-card.animate {
top: 5px;
left: 5px;
width: 335px;
height: 300px;
box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container {
text-align: center;
background: #fff;
position: absolute;
top: 250px;
left: 0;
width: 100%;
height: 80px;
padding: 8px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#product-card.animate .stats-container {
top: 220px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.stats-container .product_name {
font-size: 22px;
color: #333;
}
.stats-container p {
font-size: 16px;
color: #3b2a2b;
padding: 2px 0 20px 0;
}
.image_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #b34617;
opacity: 0;
}
#product-card.animate .image_overlay {
opacity: 0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options {
padding: 2px 0 0;
}
.product-options strong {
font-weight: 700;
color: #393c45;
font-size: 14px;
}
.product-options span {
color: #969699;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#view_details {
position: absolute;
top: 112px;
left: 50%;
margin-left: -85px;
color: #fff;
font-size: 50px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
padding: 10px 0;
width: 172px;
opacity: 0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover {
color: #333;
cursor: pointer;
}
#product-card.animate #view_details {
opacity: 1;
width: 152px;
font-size: 15px;
margin-left: -75px;
top: 70px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details .glyphicon-play {
font-size: 45px;
border: 2px solid #fffdfd;
border-radius: 80px;
padding: 15px;
color:#fff;
}
#view_details .glyphicon-play:hover{
font-size: 45px;
border: 2px solid #000;
border-radius: 80px;
color:#000;
}
div.shadow {
width: 335px;
height: 520px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
});
This Pen doesn't use any external JavaScript resources.