css hover on image

Question

I have this simple problem. I'll try to explain with a sample code

An image in a td

<td style="text-align:right;"><a class="ratingstar" href="javascript:rate('1','27')" title="1"><img src="assets/images/star.png" alt="*" /></a></td>

Css for this image

.ratingstar:hover img, .ratingstar:focus img
{
   margin-bottom: 3px;
}

So when i hover on image it moves up a bit to give this lifted feeling. Problem is that at the same time height of td increases and so elements below gets pushed down.

How can i keep td's size fixed while having my image lifted. I can increase height of td to solve this but as this is a mobile site I don't want to set specific height to size but have it expanded according to content inside.

I hope this is clear enough.

Answer 1

You can do this with a negative top margin:

.ratingstar:hover img, .ratingstar:focus img
{
   margin-top: -3px;
}

Or, if you do not need the actual image, you can do this really easily using background image and positioning.

.ratingstar
{
   background-image: url(assets/images/star.png);
   background-position: 0 0;
   background-repeat: no-repeat;
}
.ratingstar:hover img, .ratingstar:focus img
{
   background-position: 0 -3px;
}

Answer 2

First solution (seen in CSS-tricks website): use relative positioning like

.ratingstar:hover img, .ratingstar:focus img {
  position: relative;
  bottom: 3px;
}

Second solution: play with padding-bottom going from 3 to 0px when margin-bottom goes from 0 to 3px, if your design permits it.
edit: It could also be border-top or bottom (same color as your background, if it isn't a gradient or image but a unique color)