CodePen

HTML

            
              
  <div class="box">
    <h1><a href="#">Box 1</a></h1>
  </div>
  <div class="box">
    <h1><a href="#">Box 2</a></h1>
  </div>
  <div class="box">
    <h1><a href="#">Box 3</a></h1>
  </div>
<div class="test"></div>
            
          
!
via HTML Inspector

CSS

            
              .box {
  position: relative;
  height: 8em;
  width: 600px;
  margin: 2em auto;
  overflow: hidden;
  transform: scale(.95,.95);
  transition: .25s linear;
  box-shadow: 3px 3px 5px #000;
  h1 {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-image: url('http://lorempixel.com/900/600');
      background-position: 50%;
      transition: .25s linear;
      transform-origin: bottom left;
      &:hover {
        transform: scale(1, .5);
      }
  }
    a {
      display: block;
      padding-top: 15em;
      width: 100%;
      background: rgba(0, 0, 0, .75);
      transition: .25s linear;
      &:hover {
      background: transparent; 
    }
    }
  
  &:nth-child(even) h1 {
    text-align: right;
  }
  &:hover {
    z-index: 4;
    transform: scale(1,1.95);
  }
}

.test {
  width: 100%;
  height: 1em;
  background-color: green;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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