<div id="wrap">
  <div class="centerer">
  
    <div id="blocks">
      <div class="block block--link">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--link">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--link">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--link">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--link">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
      <div class="block block--hidden">
        <div class="block__pad">
          <div class="block__content"></div>
        </div>
      </div>
    </div>
    
  </div>
</div>

// autoprefixer: true

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.centerer {
  width: 100%;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

#blocks {
  width: 400px;
  margin: auto;
}

.block {
  width: 200px;
  height: 200px;
  overflow: hidden;

  &__pad {
    width: 200px;
    height: 200px;
    padding: 10px;
  }

  &__content {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  &--link {
    cursor: pointer;
    transition: box-shadow .2s ease;

    &:hover {
      box-shadow: 0 0 0 2px #b5d5fa;
    }
  }

  &--hidden {
    display: none;

    .block {
      &__content {
        background: #c7efe7;
        transition: .4s ease;
        transition-property: transform, opacity;
        transform: scale(.5);
        opacity: 0;
      }
    }

    &--show {
      display: block;

      .block {
        &__content {
          transform: scale(1);
          opacity: 1;
        }
      }
    }
  }
}

$(function () {

  $('.block--link').click(function () {
    var nextHidden = $(this).nextUntil('.block--link');

    nextHidden.toggleClass('block--hidden--show');
    $('#blocks').masonry('layout');
  });

  $('#blocks').masonry({
    itemSelector: '.block'
  });

});