[Resolvido] Aplicar efeito a:hover em imagens

Gostaria de ajuda para aplicar um efeito a:hover no código abaixo de modo que quando o mouse passar em cima do ícone a imagem mude para a posição "bottom". O que me confunde são os códigos php que não sei como poderei aplicar o efeito. O código está ssim:

<div id="topmenu">
<?php
$contact = get_option('contact_link');
$imprint = get_option('imprint_link');
?>

<a href="/"><img src="<?php bloginfo('template_directory'); ?>/images/home.gif"></a>
<?php if (!empty($contact) && $contact==0) {
?>
<a href="<?php echo $contact;?>"><img src="<?php bloginfo('template_directory'); ?>/images/contact.gif"></a>
<?php
}
?>
<a href="http://www.twitter.com/ampliatta"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.gif"></a>
<a href="http://www.facebook.com/ampliatta"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.gif"></a>
<?php if (!empty($imprint) && $imprint==0) {
?>
<a href="<?php echo $imprint;?>"><img src="<?php bloginfo('template_directory'); ?>/images/imprint.gif"></a>
<?php
}
?>
</div>

A id #topmenu é:

#topmenu {
margin-top: 20px;
float: right;
clear: both;
}

Eu tentei criar o código abaixo para o ícone home por exemplo mas não deu certo:

#topmenu a {background:url(images/home.gif) no-repeat left top}
#topmenu a:hover {bacground-position:left bottom;}

Será que além dessa CSS eu deveria colocar algo mais no código da página?