Эффект не в фактическом изменение размеров изображения, а в изменении размеров видимой области при наведении указателя мыши. Свойство overflow определяет отображение контента, когда он переполняет область контейнера. Если размеры контейнера ограничены по какой-либо причине и меньше чем само изображение, свойство overflow используют, чтобы определить поведение при переполнении контейнера. Возможные значения свойства overflow: visible, hidden, scroll и auto. По умолчанию часть картиники скрывается, и появляется только при наведении указателя мыши. Помещаем картинку (img) в контейнер (a) для него же указываем высоту\ширину  и position:relative. Картинка (img) внутри имеет position:absolute. Используем отрицательные значения свойств top и left, чтобы сместить изображение.

XHTML————————————-
<ul>
<li><a href=»#»><img src=»i/1.jpg» /></a></li>
<li><a href=»#»><img src=»i/2.jpg» /></a></li>
<li><a href=»#»><img src=»i/3.jpg» /></a></li>
<li><a href=»#»><img src=»i/4.jpg» /></a></li>
</ul>

CSS————————————-
ul, li {
margin:0;
padding:0;
list-style:none;
float:left;
}

ul li {
margin-right:5px;
border:1px #00FF33 solid;
}

ul li a {
width:200px;
height:200px;
line-height:200px;
overflow:hidden;
display:block;
position:relative;
z-index:1;
}

ul li a img {
border:none;
position:absolute;   \или position:relative;\
top:-25%;
left:-35%;
}

ul li a:hover {
overflow:visible;
z-index:1000;
}

ul li a:hover img {
border:1px #000000 solid;
}