Move link image 5px up on hover

后端未结

关注

 5  654

孤城傲影

How would I go about acheiving an effect similar to that on this site\'s portfolio page Solid Giant, with CSS and HTML?

I had thought that just putting something like t

相关标签:

5条回答

闹比i

2021-02-05 07:45
position: relative would work:
```
a img:hover{ position: relative; 
             top: -5px;} 
```
note that position: relative reserves the space in the document flow as if the element were not moved. But I think in this case, that is not an issue.
0 讨论(0)
发布评论:

提交评论
- 加载中...
闹比i

2021-02-05 07:45
Give the image an id:
```
<img id="imgHover" src="" />


 #imgHover:hover { margin-top: -5px; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
野的像风

2021-02-05 07:47
You could also use CSS/HTML5 animations: http://slides.html5rocks.com/#css-animation

you could also wrap it in another parentdiv that has position:relative set:
```
<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
长情又很酷

2021-02-05 08:00
Make sure you have this in your html so IE knows how to work properly
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

长情又很酷

2021-02-05 08:05

Also see translate():

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)
}

See a similar working example:
http://jsfiddle.net/rimian/7aPvS/1/

0 讨论(0)