A ideia do resize na verdade é meio que criar uma mascara, uma area de visualização da imagem, assim ao passar o mouse sobre a imagem mostraria a tag <img> por completo, assim como segue o conceito abaixo:

O Codigo para a inserção da imagem já com o efeito de resize é bem simples e não joge muito do que temos hoje em webStandard:

<a href="#"><img src="image.jpg"  alt="my image" /></a>

Veja o exemplo rodando ok na Demo page.

O estágio default em css para as imagens pequenas, thumbnails, é algo em torno do código abaixo, podendo, é claro, ser alterado de acordo com a necessidade do projeto:

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;       
}
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}

Usando posicionamento absoluto podemos então criar o nosso 'fake crop' na imagem, cada imagem deve ter um estilo proprio para o crop e mudando o posicionamento em top e left de acordo com a necessidade.

ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}
ul#thumbs li#image1 a img{
    top:-28px;
    left:-55px;   
}   
ul#thumbs li#image2 a img{
    top:-18px;
    left:-48px;   
}   
ul#thumbs li#image3 a img{
    top:-21px;
    left:-30px;   
}

e Finalmente para ativar o resize colocamos o codigo hover que vai fazer a imagem aparece toda:

ul#thumbs a:hover{
    overflow:visible;
    z-index:1000;
    border:none;       
}

Bom proveito a todos e qualquer dúvida não deixem de ler o post original que segue o link abaixo:

Link: Resize holover image with CSS