hover card

by Jordan Dayton

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<div class="main-wrapper">

  <div class="cards">
    <div class="make-3D-space">
      <div class="product-card">
        <div class="product-front">
          <div class="shadow"></div>
          <img src="http://gdurl.com/yImf" alt="Free Courses Picture" />
          <div class="image_overlay"></div>
          <a href="http://google.com">
            <div class="view_details">More details</div>
          </a>
          <div class="info-container">
            <!--<span class="product_price">$39</span>-->
            <div class="program-name">Free CPE Courses</div>
            <span class="program-description">Catchy Tagline that could be two rows or maybe another but no more! Seriously! Okay maybe it's okay to have another.</span>
            <div class="program-details">
              <ul>
                <li>These rigt here are the highlights of the program the crazy thing is too long.</li>
                <li>These_are_the_hightlights_ of this pro gram and stuff program</li>
                <li>These_are_the_hightlights_ o folk aj d fort k jdf program could be better</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="cards">
    <div class="make-3D-space">
      <div class="product-card">
        <div class="product-front">
          <div class="shadow"></div>
          <img src="http://gdurl.com/cLh7" alt="Free Courses Picture" />
          <div class="image_overlay"></div>
          <a href="http://google.com">
            <div class="view_details">More details</div>
          </a>
          <div class="info-container">
            <!--<span class="product_price">$39</span>-->
            <div class="program-name">Accounting War Stories</div>
            <span...

CSS

/* Generals resets and unimportant stuff */

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}

.main-wrapper {
  text-align: center;
  margin-top: 0;
}

.cards {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 580px;
  vertical-align: top;
}

/* --- Product Card ---- */

.make-3D-space {
  position: relative;
  text-align: left;
  perspective: 800px;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transition: transform 5s;
  top: 80px;
  left: 50%;
  margin-left: -175px;
}

.product-front {
  width: 335px;
  height: auto;
  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: 490px;
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0px 12px 53px -11px rgba(0, 0, 0, 0.3);
  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: 540px;
  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;
}

.info-container {
  background: #fff;
  position: absolute;
  top: 370px;
  left: 0;
  width: 290px;
  height: 300px;
  padding: 15px 25px 35px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms...

JavaScript

$(document).ready(function() {

  // Lift card and show info on Mouseover
  $('.product-card').hover(function() {
    $(this).addClass('animate');
  }, function() {
    $(this).removeClass('animate');
  });

});