<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');
	});	
	
	
});