Flip card effect ei 9 alternative

by Susan Delgado

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="hero">
  <div class="card-container">



    <div class="yellow flip-container">
      <div class="flipper">
        <div class="front">
          <div>
            <a href="#" target="_blank">
              <!-- front content -->
              <h3 class="animated fadeIn">Structural Heart Disease</h3>

            </a>
          </div>
        </div>
        <div class="back">
          <div>
            <a href="#" target="_blank">
              <!-- back content -->
              <span class="content">
           <p>Over 60 manuscripts since 2015 from PARTNER I and PARTNER II, including landmark papers in The New England Journal of Medicine, JAMA, and The Lancet. </p><button class="btn btn-learnmore"> Find out more</button></span>
            </a>

          </div>
        </div>
      </div>
    </div>



    <div class="peach flip-container">
      <div class="flipper">
        <div class="front">
          <div>
            <a href="#" target="_blank">
              <!-- front content -->
              <h3 class="animated fadeIn">Peripheral Artery Disease</h3></a>
          </div>
        </div>
        <div class="back">
          <div>
            <a href="#" target="_blank">
              <!-- back content -->
              <span class="content">
           <p>The JETSTREAM Calcium study showed increased lumen dimensions by IVUS in femoral-popliteal lesions by removing superficial calcium with the Jetstream Atherectomy System without major complications.</p><button class="btn btn-learnmore"> Find out more</button></a>
         </span>
            </a>

          </div>
        </div>
      </div>
    </div>



    <div class="pink flip-container">
      <div class="flipper">
        <div class="front">
          <div>
            <a href="#" target="_blank">
              <!-- front content -->
              <h3 class="animated fadeIn">Coronary...

CSS

.hero{
          position:relative;
          width:100%;
          /* background:url(http://lorempixel.com/1366/500/); */
          background-size: cover;
          background-position: center 0;
          min-height: 395px;
          padding: 50px;
          overflow: auto;
        }
        .card-container {
            max-width: 835px;
            margin: 0 auto;
            color: #fff;
            font-size: 11px;
            font-family: 'Maven Pro', sans-serif;
        }
        .card-container a{
            color: #fff;
            text-decoration: none;
            vertical-align: middle;
            text-align: center;
            width:100%;
            height:90%;
            display: table; 
            overflow: hidden;
            /*background: blue;*/
            
        }
        .card-container .content{
              vertical-align: middle;
              display: table-cell;
        }
        .card-container a p{
            color: #fff;
            font-size: 12px;
            text-align: left;
            margin-bottom: 5px;
        }
        .card-container .btn-learnmore{
            color: #fff;
            font-size: 10px;
            text-align: center;
            display:inline-block;
            border:0 solid transparent;
            background: #0079b5;
            border:1px solid #1d5b7e;
            cursor: pointer;
            padding: 2px 8px;
            border-radius: 5px;
        }

        .card-container h3,.card-container a h3 {
              margin: auto;
              font-size: 18px;
              text-align: center;
              text-decoration: none;
              vertical-align: middle;
              
              display: table-cell;
              text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
        }

        .front > div,
        .back > div {
          
            padding: 5px 10px;
            height: 180px;
  
        }
 
        .no-touch .phone-button{
            display: none;
           ...

JavaScript

$(function() {
   $('.flip-container').hover(function(e) {
     // alert('hovered');
     var target = e.currentTarget,
       htmlClass = $('html').hasClass('no-csstransitions');
     if (htmlClass) {
       // alert(target);
       $(target).find('.front').fadeToggle("fast");
     };

   })
 });