cards with animate

by Zsanett Tamás

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="container-fluid" id="">
  <section class="container pt-3">
    <h1 class="section-headline">Main Title</h1>
    <hr class="schr">
    <div class="box-container pt-5">
      <!-- box column 1 -->
      <div class="column">
        <!-- Post-->
        <div class="post-module">
          <!-- Thumbnail-->
          <div class="thumbnail">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" />
          </div>
          <!-- Post Content-->
          <div class="post-content">
            <h1 class="title">Title Title</h1>
            <h2 class="sub_title">Subtitle subtitle subtitle</h2>
            <p class="description">Description Description<br> Description Description<br> Description Description
            </p>
          </div>
        </div>
      </div>
      <!-- box column 2 -->
      <div class="column">
        <!-- Post-->
        <div class="post-module">
          <!-- Thumbnail-->
          <div class="thumbnail">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg" />
          </div>
          <!-- Post Content-->
          <div class="post-content">
            <h1 class="title">Title Title</h1>
            <h2 class="sub_title">Subtitle subtitle subtitle</h2>
            <p class="description">Description Description<br> Description Description<br> Description Description
            </p>
          </div>
        </div>
     ...

CSS

.brw-btn {
  margin-top: 90px;
  font-size: 1.75rem;
}

.brw-sec-btn {
  padding: 15px;
  margin-top: 35px;
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 2px;
}

.brw-sec-btn.btn-primary:hover,
.brw-sec-btn.btn-primary:not(:disabled):not(.disabled).active,
.brw-sec-btn.btn-primary:not(:disabled):not(.disabled):active,
.show>.brw-sec-btn.btn-primary.dropdown-toggle {
  background-color: #f6a415;
  border: 1px solid #fff;
  box-shadow: 0 1px 35px #fff;
}

.brw-sec-btn.btn-primary {
  background-image: none;
  background-color: #f6a415;
  border-color: #f6a415;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.section-headline {
  letter-spacing: 25px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4d4d4f;
  text-align: center;
  padding: 30px;
  width: 100%;
}

hr.schr {
  width: 155px;
  height: 5px;
  margin-top: -35px;
  /* padding-bottom: 0px; */
  background-color: #f6a415;
}

/*** box css ***/

/** ------------------------------------------------------------------------------- **/

/** ------------------------------------------------------------------------------- **/

.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: #FFFFFF;
  min-width: 270px;
  height: 400px;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.post-module.post-bg {
  background-color: #f6a415;
  color: #fff;
}

.post-module.post-bg h1 {
  padding-top:...

JavaScript

$('.post-module').hover(function() {
      $(this).find('.description').stop().animate({
        height: "toggle",
        opacity: "toggle"
      }, 300);
    });