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 id="make-3D-space">
  <div id="product-card">
    <div id="product-front">
      <div class="shadow"></div>
      <img src="http://gdurl.com/yImf" alt="" />
      <div class="image_overlay"></div>
      <a href="http://google.com">
        <div id="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>

CSS

/* Generals resets and unimportant stuff */

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

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



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

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

#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 ease-out;
}

#product-card.animate .info-container {
  top: 272px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
 ...

JavaScript

$(document).ready(function() {

  // Lift card and show info 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');
  });

});