CSS animated menu
- by Andrea
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?
