A simple solution with css:

CSS:

#teste{position:relative}
#teste:hover{top:-2px;box-shadow:0 2px 2px #666}

HTML:

<img src="/imagem.png" id="teste">

If you want to simplify, for older browsers, just use a border instead of shadow:

#teste{position:relative}
#teste:hover{top:-2px;border-bottom:2px solid #999}

Increasing with transitions:

With transitions you can use the same technique above, but with the browser doing an animation between normal and hover states:

#teste{position:relative;top:0}
#teste:hover{top:-4px;box-shadow:0 4px 4px #999;
   transition: all .2s ease-in-out}

Just adjust the parameters for the desired effect.

Demo:

#teste1{position:relative;padding:4px;background-color:#cf6}
#teste1:hover{top:-2px;box-shadow:0 2px 2px #666}

#teste2{position:relative;padding:4px;background-color:#cf6}
#teste2:hover{top:-2px;border-bottom:2px solid #999;padding-bottom:2px}

#teste3{position:relative;top:0;padding:4px;background-color:#cf6;
    transition: all .2s ease-in-out}
#teste3:hover{top:-4px;box-shadow:0 4px 3px #999}

Box-shadow (passe o mouse para testar):<br>
<img src="https://i.stack.imgur.com/wizTJ.png"id="teste1"><br>
Simples, com border:<br>
<img src="https://i.stack.imgur.com/wizTJ.png"id="teste2"><br>
Incrementado, com transition:<br>
<img src="https://i.stack.imgur.com/wizTJ.png"id="teste3">

  

Note that in certain versions of IE the hover only works on a elements.

If you want an image effect equal to this example of Tableless , you need to use CSS Transition and CSS Animation.

HTML

<a href="#">
    <img class="asterisco" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png"alt="Logo Tableless" />
    <img class="texto" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-02.png"alt="Logo Tableless" />
</a>

CSS

body { background-color: #333; }    
a { color: #333; }    
.asterisco { transition: all 0.5s ease; }    
a:hover .asterisco { transform: rotate(180deg); }    
.texto { transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); }    
a:hover .texto { transform: scale(1.2); }

have in javascript

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

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

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">