<!-- JJ -->
<div id="page">
  <h1 class="ribbon">
    <strong class="ribbon-content">Gallery</strong>
  </h1>
  
  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-male icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-female icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-user icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-user icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-female icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-male icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-group icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-female icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-male icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-male icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-user icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image">
        <em class="icon-group icon-4x"></em>
      </div>
      <div class="info">
        <h4>Lorem Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus risus elit, non egestas lorem luctus sed. Vestibulum rhoncus dui id egestas faucibus. Morbi gravida lectus sit amet tortor ultricies consequat.</p>
      </div>
    </div>
  </div>
</div>
<!-- SDG -->
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato);
$gray1: #F5F7FA; 
$gray2: #E6E9ED;
$mediumGray1: #CCD1D9;
$mediumGray2: #AAB2BD;
$darkGray1: #656D78;
$darkGray2: #434A54;
$aqua1: #4FC1E9;
$aqua2: #3BAFDA;
$grapefruit1: #ED5565;
$grapefruit2: #DA4453;
$sunflower1: #FFCE54;
$grass1: #A0D468;

body {
  @include background(radial-gradient(center 0, circle cover, lighten($gray1, 5%), $gray2) no-repeat);
  background-color: $gray1;
  font-smoothing: antialiased;
  font-family: "Lato", san-serif;
  min-height: 100vh;
}
strong {
  font-weight: 900;
}
.item {
  float: left;
  width: 25%;
  min-width: 150px;
  text-align: center;
  
  .inner {
    position: relative;
    padding: 15px;
    margin: 15px;
    border: 1px solid lighten($mediumGray1, 6%);
    border-radius: 3px;
    background-color: #fff;
    
    &:hover {
      transition: background 0.25s ease-in-out;
      cursor: pointer;
      background: darken(#fff, 5%);
    }
    .image{
      text-align: center;
    }
    .info {
      display: none;
    }
  }
}

.ribbon {
 font-size: 18px;
 text-shadow: 0px 0px 1px darken($mediumGray1, 14%);
 letter-spacing: 2px;
 width: 50%;
 position: relative;
 background: $mediumGray1;
 color: #fff;
 text-align: center;
 padding: 10px 20px;
 margin: 0 auto 20px;
 text-transform: Uppercase;
 border: 1px solid darken($mediumGray1, 5%);
 border-radius: 2px;
}
 
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 top: -6px;
 border: 18px solid darken($mediumGray1, 4%);
 z-index: -1;
 
}
 
.ribbon:before {
 left: -36px;
 border-right-width: 18px;
 border-left-color: transparent;
}
 
.ribbon:after {
 right: -36px;
 border-left-width: 18px;
 border-right-color: transparent;
}
 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: darken($mediumGray1, 10%) transparent transparent transparent;
 top: -6px;
 transform: rotate(180deg);
}
 
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 6px 0 0 6px;
}
 
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 6px 6px 0 0;
}
  

.icon-male {color: $aqua1;}
.icon-female {color: $grapefruit1;}
.icon-user {color: $grass1;}
.icon-group {color: $sunflower1;}


#page {
  position: relative;
  width: 600px;
  margin: 20px auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js