Переместить изображение на 5 пикселей вверх при наведении - PullRequest
Новая
       21

Переместить изображение на 5 пикселей вверх при наведении

15 голосов
/ 27 марта 2011

Как мне добиться эффекта, подобного таковому на странице портфолио этого сайта Solid Giant , с помощью CSS и HTML?

Я думал, что просто поставить что-то вроде этого будет работать: 

a img{
    margin-top: 5px;
}

a img:hover{
    margin-top: 0px;
}

Но это не сработало, даже если я поставил hover на ссылку вместо img.Я искал его код и CSS, но я не мог на всю жизнь понять это.Помогите пожалуйста:)

Ответы [ 5 ]

34 голосов
/ 27 марта 2011

position: relative будет работать: 

a img:hover{ position: relative; 
             top: -5px;}

обратите внимание, что position: relative резервирует пространство в потоке документа, как если бы элемент был не перемещен. Но я думаю, что в этом случае это не проблема.

12 голосов
/ 10 марта 2014

Также см. Перевод ():

http://www.w3schools.com/css/css3_2dtransforms.asp

img:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px)
}

См. Аналогичный рабочий пример:
http://jsfiddle.net/rimian/7aPvS/1/

0 голосов
/ 07 января 2012

Убедитесь, что у вас есть это в HTML, чтобы IE знал, как правильно работать 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0 голосов
/ 27 марта 2011

Дайте изображению идентификатор: 

<img id="imgHover" src="" />


 #imgHover:hover { margin-top: -5px; }
0 голосов
/ 27 марта 2011

Вы также можете использовать анимацию CSS / HTML5: http://slides.html5rocks.com/#css-animation

Вы также можете обернуть его в другой родительский раздел, имеющий позицию: относительный набор: 

<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}
...