<div class="image-border">
  <div class="main-image"></div>
  <p class="title">IMAGE HEADLINE</p>
</div>

%flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro';
  
  @extend %flex;
}

.image-border {
  width: 300px;
  height: 300px;
  background-color: #eee;
  background-image: url('https://unsplash.it/300?image=885');
  position: relative;
  z-index: 1;
  
  &:after {
    content: '';
    position: absolute;
    width: 290px;
    height:290px;
    left: 5px;
    top: 5px;
    background-color: #fff;
  }
  
  .main-image {
    position: absolute;
    width: 290px;
    height:290px;
    left: 5px;
    top: 5px;
    background-image: url('https://unsplash.it/300?image=885');
    background-size: 300px 300px;
    background-position: center center;
    z-index: 2;
    transition: .5s cubic-bezier(.5,.03,.41,1);
  }
  
  &:hover > .main-image {
    transform: translate(-15px, -15px);
    transition: .5s cubic-bezier(.5,.03,.41,1);
  }
  
  &:hover > p.title:after {
    transform: scale3d(1, 1, 1);
    transition: .5s cubic-bezier(.5,.03,.41,1);
  }
  
  p.title {
    height: 60px;
    padding: 0;
    position: absolute;
    bottom: -80px;
    font-weight: 400;
    line-height: 60px;
    color: #2c3e50;
    font-size: 1em;
    margin-left: 150px;
    transform: translateX(-50%);
    
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #e74c3c;
      bottom: 10px;
      left: 0;
      transform: scale3d(0, 1, 1);
      transition: .5s cubic-bezier(.5,.03,.41,1);
    }
  }
  
}