问题
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 this would work:
a img{
margin-top: 5px;
}
a img:hover{
margin-top: 0px;
}
But it did not work, even if I put the :hover on the link instead of the img. I scoured his code and css but I could not for the life of me figure this out. Help please :)
回答1:
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.
回答2:
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/
回答3:
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;
}
回答4:
Give the image an id:
<img id="imgHover" src="" />
#imgHover:hover { margin-top: -5px; }
回答5:
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">
来源:https://stackoverflow.com/questions/5449031/move-link-image-5px-up-on-hover