Forma suave de mover elementos HTML quando o rato se move por cima deles

[Adam Brave]

Boas,

Sou novo na programação de páginas web em html e javascript e estou a criar uma página pessoal. Estou a testar várias coisas e gostaria de criar alguns efeitos habituais em páginas que se vai vendo por aí como por exemplo fazer com que um elemento, como uma imagem por exemplo, se mova quando o rato passa sobre ela. Para isto implementei o seguinte código:
 

<script>
function hovermouse(x) {
    x.style.height = "113px";
    x.style.width = "113px";
}

function normalImg(x) {
    x.style.height = "80px";
    x.style.width = "80px";
}
</script>

Este código, em conjunto com a tag <img> onde chamo as funções apresentadas em cima, permite obter um efeito similar ao pretendido.
 

<img onmousemove="hovermouse(this)" onmouseout="normalImg(this)" src="images/snoopy.gif" alt="HobbiesButton" width="80" height="80">

O problema desta abordagem é que ela é um pouco grosseira, dado que simplesmente aumenta o tamanho da imagem mas de forma muito brusca fazendo com que toda a página se mova simultaneamente o que se torna incomodativo. Alguém me consegue indicar uma outra forma de fazer este efeito mas de maneira mais... "elegante" e mais suave?

Obrigado