Cards

<div class="sect-mast">
  <div class="vcenter">
    <div class="content">
      <h1>
        Hovertastic Fantasic effects using CSS <span>transforms</span>, <span>transitions</span>, & <span>filters</span>.
      </h1>
      <hr class="sep" />
    </div>
  </div>
</div>
<ul class="cards cards--articles">
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=533" />
      <h4>
        Clown Down
      </h4>
      <div class="content">
        <h3>
          One Juggalo's Journey: White Trash to Ninja
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=536" />
      <h4>
        Beasts
      </h4>
      <div class="content">
        <h3>
          Can't Stand It, I Know You Planned It
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=527" />
      <h4>
        Stink & Sweat
      </h4>
      <div class="content">
        <h3>
          Sara Stink Fingers Makes Your Pinky All Stinky
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=526" />
      <h4>
        Skunky Sacks
      </h4>
      <div class="content">
        <h3>
          Breath and Stop, Gimmie Whatchu Got 
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=535" />
      <h4>
        Get On The Mic
      </h4>
      <div class="content">
        <h3>
          Who Do, I Can Do What You Do, Easy 
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=531" />
      <h4>
        Killer Whales
      </h4>
      <div class="content">
        <h3>
          Wu-Tang Killa Whales, We On The Shore
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=528" />
      <h4>
        Got Jokes
      </h4>
      <div class="content">
        <h3>
          So You Think I'm Funny Like Ha Ha
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://unsplash.it/600/800?image=523" />
      <h4>
        Your Mom
      </h4>
      <div class="content">
        <h3>
          Tell YourMom I said What's Up Homie
        </h3>
        <footer>
          <p>
            Etiam porta sem malesueda magna mollis euismod sagittis laca vel.
          </p>
          <span>By Carlos Danger An Hour Ago</span>
        </footer>
      </div>
    </a>
  </li>
</ul>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//Скрипт js надо подключать здесь
//Автор: Stephen Scaff. @StephenScaff

/*----------------------------------------------   
-Imports
-----------------------------------------------  */
@import url(https://fonts.googleapis.com/css?family=Slabo+27px|Lato:400,300,700);
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/*----------------------------------------------   
--Config / Vars
-----------------------------------------------  */
/* MQs Min-Width */
/*----------------------------------------------   
-Mixins
-----------------------------------------------  */
/*----------------------------------------------   
--Disable hovers on scroll:
  If you end up with a big ass grid of hovers
  we don't want to jank scroll up with continous 
  hovers getting triggered. So, let's add a class 
  to the body (via js) while scrolling to prevent.
-----------------------------------------------  */
.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

/*----------------------------------------------   
--borderbox reset
-----------------------------------------------  */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*----------------------------------------------   
--Typography
-----------------------------------------------  */
h1 {
  font-size: 2em;
  line-height: 1.3;
}
@media (min-width: 54em) {
  h1 {
    font-size: 2.75em;
  }
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1em;
}

h2, h3, h4 {
  font-family: lato, Helvetica, sans-serif;
  letter-spacing: 0.01em;
}

hr.sep {
  border-top: 0;
  border: 1px solid #111;
  margin: 0;
  display: block;
  width: 4em;
  margin: 1.5em 0;
}

/*----------------------------------------------   
-Body & Fluid sizings
-----------------------------------------------  */
body {
  font-family: "slabo", georgia, serif;
  font-weight: normal;
  line-height: 1.6;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 32em) {
  body {
    font-size: 101%;
  }
}
@media (min-width: 54em) {
  body {
    font-size: 103%;
  }
}
@media (min-width: 65em) {
  body {
    font-size: 105%;
  }
}
@media (min-width: 91em) {
  body {
    font-size: 106%;
  }
}
@media (min-width: 115em) {
  body {
    font-size: 110%;
  }
}
@media (min-width: 130em) {
  body {
    font-size: 115%;
  }
}

/*----------------------------------------------   
--Animations
-----------------------------------------------  */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*----------------------------------------------   
--Sections
-----------------------------------------------  */
.sect-mast {
  display: table;
  height: 60vh;
  width: 100%;
  background-color: #fff;
  color: #333;
}
.sect-mast .vcenter {
  display: table-cell;
  vertical-align: middle;
}
.sect-mast .vcenter .content {
  padding: 8%;
  max-width: 50em;
}
.sect-mast .vcenter h1 {
  text-align: left;
  margin: 0;
  display: block;
  font-family: slabo;
}
.sect-mast .vcenter h1 span {
  font-style: italic;
}

ul.cards {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin: 0 -1px;
}
ul.cards li {
  color: #fff;
  background-color: #111;
  overflow: hidden;
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  border: 1px solid #fff;
  border-left: 0;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  visibility: visible;
  -webkit-backface-visibility: hidden;
}
@media (min-width: 32em) {
  ul.cards li {
    width: 50%;
  }
}
@media (min-width: 54em) {
  ul.cards li {
    width: 25%;
  }
}
ul.cards a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%);
  background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
ul.cards img {
  display: block;
  width: 100%;
  height: auto;
  overflow: none;
  float: left;
  min-height: 20em;
  -webkit-animation: fade-in ease-in-out 2s 0.5s both;
  -moz-animation: fade-in ease-in-out 2s 0.5s both;
  animation: fade-in ease-in-out 2s 0.5s both;
}
ul.cards h4 {
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 4;
  color: #fff;
}
ul.cards div.content {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  padding: 1.25rem;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  transition: transform 0.5s ease;
}
ul.cards div.content h3 {
  font-weight: 700;
  margin: 0 0 0.5em;
}
ul.cards div.content p {
  font-size: 95%;
}
ul.cards footer {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateY(8rem);
  -moz-transform: translateY(8rem);
  -ms-transform: translateY(8rem);
  -o-transform: translateY(8rem);
  transform: translateY(8rem);
  -webkit-transition: -webkit-transform 0.5s ease, opacity 0.2s ease;
  -moz-transition: -moz-transform 0.5s ease, opacity 0.2s ease;
  transition: transform 0.5s ease, opacity 0.2s ease;
}
ul.cards footer p {
  margin: 0 0 0.5em;
}
ul.cards footer span {
  font-size: 75%;
  color: rgba(255, 255, 255, 0.8);
}

li:hover a:after {
  opacity: 1;
}
li:hover .content {
  -webkit-transform: translateY(-7em);
  -moz-transform: translateY(-7em);
  -ms-transform: translateY(-7em);
  -o-transform: translateY(-7em);
  transform: translateY(-7em);
  -webkit-transition: -webkit-transform 0.7s ease;
  -moz-transition: -moz-transform 0.7s ease;
  transition: transform 0.7s ease;
}
li:hover img {
  -webkit-filter: grayscale(90%);
  filter: grayscale(90%);
}
li:hover footer {
  opacity: 1;
  -webkit-transform: translateY(0em);
  -moz-transform: translateY(0em);
  -ms-transform: translateY(0em);
  -o-transform: translateY(0em);
  transform: translateY(0em);
  -webkit-transition: -webkit-transform 0.5s ease, opacity 0.7s ease;
  -moz-transition: -moz-transform 0.5s ease, opacity 0.7s ease;
  transition: transform 0.5s ease, opacity 0.7s ease;
}

var body = document.body,
      timer;
    window.addEventListener('scroll', function() {
      clearTimeout(timer);
      if (!body.classList.contains('disable-hover')) {
        body.classList.add('disable-hover');
      }
      timer = setTimeout(function() {
        body.classList.remove('disable-hover');
      }, 100);
    }, false);
    var eT = 0;