I am trying to obtain something similar to the "share this on..." menu here but I don't quite understand how they are doing this, even after a look at their CSS. I refer to the fact that the images show up on hover.

My first attempt would be something like

<div id="share_on">
    <ul>
        <li><a href="#"><img src="shareon-digg.png" /></a></li>
        <li><a href="#"><img src="shareon-reddit.png" /></a></li>
        ...
        <li><a href="#"><img src="shareon-stumbleupon.png" /></a></li>
    </ul>
</div>

and the CSS:

#share_on {overflow: hidden}
#share_on ul {margin-bottom: -16px}
#share_on li {display: inline}
#share_on li:hover {margin-top: -16px}

Of course this does not work, which is why I am asking here. In the inactive state, only half of the icon shows up, which is the expected behaviour. But on hover, nothing changes. I also have tried some variations, like

#share_on li:hover {margin-bottom: 16px}

or

#share_on li:hover {padding-bottom: 16px}

but none of these works. Any ideas?