#zoom {  
  list-style:none;  
  margin-left:-20px; /* Компенсируем отступ слева */  
  }  
  #zoom li {  
  width:252px; /* Ширина размера изображения с учетом рамки в 1px */  
  height:158px;  
  float:left;  
  margin-left:20px;  
  margin-top:20px;  
  overflow:visible;  
  display: block;  
  }  
  .zoom_it {  
  position:relative;  
  width:250px;  
  height:156px;  
  top:0;  
  left:0;  
  border:1px solid #ccc;  
  }  

  .zoom_it:hover {  
  width:300px; /* Увеличиваем ширину изображения */  
  height:188px; /* Увеличиваем высоту изображения */  
  top:-16px; /* Сдвигаем изображение вверх на значение (новая ширина - старая)/2 */  
  left:-25px; /* Сдвигаем изображение влево на значение (новая высота - старая)/2 */  
  z-index:9999; /* Располагаем изображение над всеми элементами */  
  box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Добавляем тень */  
  -webkit-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  -moz-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Firefox */  
  transition: all 0.3s ease; /* Изменяем значения всех свойств плавно в течение 0,3 сек */  
  -webkit-transition: all 0.3s ease; /* Для Safari и Chrome */  
  -o-transition: all 0.3s ease; /* Для Opera */  
  -moz-transition: all 0.3s ease; /* Для Firefox */  
  }

<ul id="zoom">  
  <li>  
  <a href="Ссылка на изображение"><img class="zoom_it" src="Ссылка на изображение" /></a>  
  </li>  
  <li>  
  <a href="Ссылка на изображение"><img class="zoom_it" src="Ссылка на изображение" /></a>  
  </li>  
  </ul>