CodePen

HTML

            
              <a href="#0" class="pizza-link">
  <span class="icon maki-embassy"></span>
  <h3>Find a Store</h3>
  <p>We've got a location near you! As far as Bellingham and Lewiston and Yakima and South to Olympia.</p>
</a>

<a href="#0" class="pizza-link">
  <span class="icon maki-fire-station"></span>
  <h3>Online Ordering</h3>
  <p>Online ordering is available for Lewiston, Sea-Tac and Spanaway. Fast and Convenient!</p>
</a>

<a href="#0" class="pizza-link">
  <span class="icon maki-bar"></span>
  <h3>Coupons</h3>
  <p>Save some scrilla on some pizza children as your father intended with PizzaTime super discounts.</p>
</a>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Oxygen:300);
@import url(http://weloveiconfonts.com/api/?family=maki);
[class*="maki-"]:before {
  font-family: 'maki', sans-serif;
}
* { @include box-sizing(border-box); }
body {
  font-family: 'Oxygen', sans-serif;
  font-size: medium;
  line-height: 1.4;
}

.pizza-link {
  display: block;
  width: 230px;
  border: 1px solid #ccc;
  float: left;
  position: relative;
  overflow: hidden;
  padding: 1.5em;
  margin: 1.5em;
  text-align: center;
  text-decoration: none;
  color: black;
  h3 {
    border-bottom: 1px solid #eee;
    padding: 3.5em 0 0.75em 0;
    margin: 0 0 0.75em 0;
    position: relative;
  }
  p {
    color: #999;
    margin: 0;
    position: relative;
    font-size: 0.9rem;
  }
  h3, p {
    @include transition(0.2s);
  }
  .icon {
    position: absolute;
    color: white;
    width: 50px;
    height: 50px;
    line-height: 40px;
    font-size: 1.5em;
    margin-left: -25px;
    left: 50%;
  }
  &:before {
    content: "";
    background: #D62121;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 20px;
    left: 50%;
    margin-left: -25px;
    @include transition(
      width 0.2s,
      left 0.2s,
      margin-left 0.2s,
      top 0.2s 0.2s,
      height 0.2s 0.2s
    );
  }
  &:hover, &:active {
    h3 {
      color: white;
      border-bottom-color: #E14646;
    }
    p {
      color: white;
    }
    &:before {
      width: 230px;
      left: 0;
      top: 0;
      margin-left: 0;
      height: 320px; // hacky
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................