Why do my icons cut off on hover, when there isn't a specified height?

On roseannebarr.tumblr.com, when you hover on my icons instead of them going up naturally they are cut off even thought I don't have a set height. I know my HTML is screwed up because I'm using a million ids but my page works off of browser bugs so just ignore it. Any ideas?

This was probabll开发者_开发知识库y the dumbest question ever sorry.

They are not cut off, you make the container smaller by moving the image outside the container using a negative top margin.

A simple solution is to put the black background on the #block style intead of on the #outer style. That way the image gets the background instead of the container, so the background follows the image when it moves instead of shrinking with the container.

Are you talking about the black background getting cut off when you hover over it? Do you want the whole icon including the background to go up? If so, you should just put the :hover on #outer instead of #block:

#outer:hover {
  margin-top: -10px;
}

Don't know if that's what you mean. If not, let me know. :)