CSS наведите курсор на изображение

Question

У меня есть эта простая проблема. Я попробую объяснить с примером кода

изображение в тд

<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 для этого изображения

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

Так что, когда я парю над изображением, оно немного поднимается, чтобы придать этому приподнятому чувству. Проблема в том, что в то же время высота td увеличивается, и поэтому элементы внизу выталкиваются вниз.

Как я могу сохранить размер td при поднятом изображении? Я могу увеличить высоту td, чтобы решить эту проблему, но так как это мобильный сайт, я не хочу устанавливать конкретную высоту, но увеличиваю ее в соответствии с содержимым внутри.

Надеюсь, это достаточно ясно.

Answer 1

Первое решение (замечено на сайте CSS-трюков): используйте относительное позиционирование, как

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

Второе решение: поиграйте с отступом снизу от 3 до 0 пикселей, когда отступ снизу от 0 до 3 пикселей, если ваш дизайн это позволяет.
редактировать: это также может быть рамка сверху или снизу (того же цвета, что и фон, если это не градиент или изображение, а уникальный цвет)

Answer 2

Вы можете сделать это с отрицательным верхним полем:

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

Или, если вам не нужно фактическое изображение, вы можете сделать это очень легко, используя фоновое изображение и позиционирование.

.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;
}