<div class="feature" style="background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/a/ausnichts/20160525/20160525125637_original.jpg?1464148610)">
    <a class="feature-title" href="http://www.imuza.com">
      はてなブログ
    </a>
    <div class="feature-description">
      <p>はてなブログ テーマ制作<br>・とことこ with Menubar<br>・Simple Responsive with Menubar<br>・Mobile-First Responsive</p>
    </div>
    <div class="feature-overlay"></div>
  </div>

.feature {
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  
  .feature-title {
    position: relative;
    display: block;
    height: 200px;
    line-height: 200px;
    color: #fff;
    text-decoration: none;
    text-shadow: 2px 2px 5px #000;
    text-align: center;
    z-index: 1;
    -webkit-transition: line-height .3s linear;
    transition: line-height .3s linear;
    &::after {
      content: "▼";
      position: absolute;
      top: 1em;
      left: 0;
      right: 0;
    }
  }
  .feature-description {
    position: absolute;
    top:  200px;
    height: 200px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    color: #666;
    white-space: nowrap;
    text-shadow: 1px 1px 3px #ffffff;
    padding: 0 5px;
    font-size: 1em;
    line-height: 1.5;
    z-index: -1;
    -webkit-transition: top .3s linear;
    transition: top .3s linear;
  }
  .feature-overlay {
    background: rgba(255,0,0,.5);
    position: absolute;
    top: 0;
    height: 200px;
    width: 100%;
    z-index: 999;
    -webkit-transition: height 0s .3s;
    transition: height 0s .3s;
  }
  &:hover {
    .feature-title {
      line-height: 40px;
     }
    .feature-description {
      top: 40px;
    }
    .feature-overlay {
      height: 0;
    }
  }
}