<div class="container">
  <div class="image-container">
    <img src="http://static.pexels.com/wp-content/uploads/2015/02/high-rise-holiday-hotel-4422-978x550.jpeg" />
     <div class="text-container">
       <h3>Case Study</h3>
       <p>Case Info</p>
    </div>
  </div>
</div>
<style>
@import "bourbon";

body {
  font-family: 'Source Code Pro', ;
  text-align: center;
  background-color: #efefef;
}

h3 {
  text-transform: uppercase;
  font-size: 15px;
  opacity: 0.8;
}

p {
  font-size: 25px;
  margin-top: -5px;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 427px;
  height: 237px;
  cursor: pointer;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.image-container {
  img {
    width: 427px;
    height: 237px;
    transform: scale(1);
    
    transition: transform 800ms ease-in-out;
  }
  
  &:after {
    content: '';
    display: block;
    height: 857px;
    width: 474px;
    position: relative;
    top: 0;
    left: 0;
    background-color: rgba(128,179,255, 0.8);
    transform: rotate(45deg) translate3d( -880px, -200px, 0);
    
    transition: transform 800ms 100ms cubic-bezier(.23,1,.32,1);
  }
  
  &:hover {
    img {
      transform: scale(1.3);
    }
    
    .text-container {
      opacity: 1;
      transform: translate(-50%, -50%);
      
      transition: opacity 500ms 200ms ease-in-out, transform 500ms 200ms ease-in-out;
    }
    
    &:after {
      transform: rotate(45deg) translate3d(-405px, -200px, 0);
    }
  }
  .text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 100;
    color: white;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  }
}
</style>