Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="press" class="module-block">
  <div class="module-block__inner">
    <h1>Press</h1>
    <h2>Recent Articles</h2>
    <div class="module-block__inner-content main-press">
      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>


    </div>
    <div class="module-block__inner-content">
      <h2>Press Contact</h2>
      <p>For press inquiries please complete the form below. A representative will contact you within 24 business hours. For immediate assistance, please call 212.759.8055.</p>
    </div>
  </div>                     
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

// Colors
$black: #000;
$white: #fff;

$enk-red: #ee1c24;
$enk-blue: #64d0f8;
$enk-black: #343434;
$enk-gray: #c2c2c2;
$enk-white: #fff;
$enk-social: #959595;
$enk-show-date: #d7d7d7;
$black: #000;
$white: #fff;


// Fonts
$base-font: 16px;

$gotham: 'Gotham SSm 4r', 'Gotham SSm A', 'Gotham SSm B', 'Arial', sans-serif; 
$reg-weight: 400; 

.main-press {margin-top: 10px;}
  figure {
    font-family: $gotham;
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 115px;
    width: 100px;
    margin-right: gutter();
    margin-bottom: gutter();
    margin-top: 0;

    
    &:hover figcaption {
      opacity: 1;
      bottom: 0;
    }
    &:before {
      content: "+";
      display: block;
      position: absolute;
      bottom: 0; right: 0;
      background: rgba(0,0,0,1);
      color: $enk-white;
      width: 25px;
      height: 25px;
      line-height: 25px;
      font-family: "SSStandard";
      font-size: em(12px);
      font-weight: bold;
      text-align: center;
      opacity: 1;
       cursor: pointer; 
      -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
    }
    &:hover:before {
      opacity: 0;
    }
  }

  figcaption {
    position: absolute;
    background: rgba(0,0,0,.8);
    color:  $enk-white;
    padding: 5px;
    width: 100%;
    height: 50px;
    opacity: 0;
    bottom: -30%;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    a {
      font-size: em(12px);
      color: $enk-white;
      text-decoration: underline;
      &:hover {color: $enk-red;}
    }
  }

SassMeister-output.css

.main-press {
  margin-top: 10px;
}

figure {
  font-family: "Gotham SSm 4r", "Gotham SSm A", "Gotham SSm B", "Arial", sans-serif;
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 115px;
  width: 100px;
  margin-right: gutter();
  margin-bottom: gutter();
  margin-top: 0;
}
figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}
figure:before {
  content: "+";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-family: "SSStandard";
  font-size: em(12px);
  font-weight: bold;
  text-align: center;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}
figure:hover:before {
  opacity: 0;
}

figcaption {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px;
  width: 100%;
  height: 50px;
  opacity: 0;
  bottom: -30%;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
figcaption a {
  font-size: em(12px);
  color: white;
  text-decoration: underline;
}
figcaption a:hover {
  color: #ee1c24;
}

SassMeister-rendered.html

<div id="press" class="module-block">
  <div class="module-block__inner">
    <h1>Press</h1>
    <h2>Recent Articles</h2>
    <div class="module-block__inner-content main-press">
      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>


    </div>
    <div class="module-block__inner-content">
      <h2>Press Contact</h2>
      <p>For press inquiries please complete the form below. A representative will contact you within 24 business hours. For immediate assistance, please call 212.759.8055.</p>
    </div>
  </div>                     
</div>