<div class="uk-container uk-container-center">
  <div class="uk-grid">
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/people.png" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
          <p>Aliquam imperdiet nibh sit amet quam tempus rhoncus</p>
          <a class="uk-position-cover" href=""></a>
        </figcaption>
      </figure>
    </div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/people.png" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
          <p>Aliquam imperdiet nibh sit amet quam tempus rhoncus</p>
          <a class="uk-position-cover" href=""></a>
        </figcaption>
      </figure>
    </div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/people.png" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left">
          <p>Aliquam imperdiet nibh sit amet quam tempus rhoncus</p>
        </figcaption>
      </figure>
    </div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/people.png" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right">
          <p>Aliquam imperdiet nibh sit amet quam tempus rhoncus</p>
        </figcaption>
      </figure>
    </div>
  </div><!-- uk-grid -->
</div><!-- uk-container -->
html {
  background: #f2f2f2;
}
.uk-overlay {
  margin-top: 35px;
  background: #e8e8e8;
}
// Icon from iconmonstr
// http://iconmonstr.com/

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.