CSS Zoom Effect?

I have created a sudo CSS "Zoom" effect as follows:

li{
  width: 200px;
    display: block;
    height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  background: #eee;
  border: 1px solid #333;
  margin: 0 0 0 -40px;
    transition: all 0.5s ease;
  z-index: 999;

  &.active{
    background: #ccc;
  }
}

li:hover{
    position: relative;
  width: 205px;
  height: 35px;
  background: #eee;
  margin: -2.5px 0 -2.5px -42.5px;
  -webkit-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  -moz-box-shadow:    0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  box-shadow:         0px 0px 19px 0px rgba(50, 50, 50, 0.95);
}

Code Pen http://codepen.io/timbo27/pen/aeCgv

There must be a more elegant way to do this in pure CSS.

Thanks,

Tim


So with some help of my fellow commenter there is an answer.

http://codepen.io/anon/pen/pGAIo

Don't forget the prefixes. otherwise it won't work.

li:hover{
     -webkit-transform:scale(1.05);
     -moz-transform:scale(1.05);
     transform:scale(1.05);
}