CodePen

HTML

            
              <img src="http://s.cdpn.io/3/pacman-ghost-hi_1.png" class="mover">

<div class="wall wall-1"></div>
<div class="wall wall-2"></div>
<div class="wall wall-3"></div>
            
          
!

CSS

            
              body {
  overflow: hidden;
}

.wall {
  background: rgba(lighten(red, 10%), 0.8);;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.wall-2 {
  background: rgba(lighten(red, 20%), 0.8);
  left: 10%;
  width: 80%;
  bottom: 20px;
  z-index: 2;
}
.wall-3 {
  background: rgba(lighten(red, 30%), 0.8);
  left: 20%;
  width: 60%;
  bottom: 40px;
  z-index: 1;
}

.mover {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 100px;
  z-index: 0;
  animation: move 4s linear infinite alternate; 
}

@keyframes move {
  from { z-index: 0; transform: scale(1); }
  to { z-index: 4; transform: scale(2.5); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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