如何使用CSS和HTML实现类似于此网站Solid Giant的作品集页面效果?
我曾尝试过这样做,但并没有成功:
a img{
margin-top: 5px;
}
a img:hover{
margin-top: 0px;
}
但是它没有起作用,即使我将:hover放在链接上而不是图像上。我仔细查看了他的代码和CSS,但我无论如何也无法弄清楚这个问题。请帮忙 :)
如何使用CSS和HTML实现类似于此网站Solid Giant的作品集页面效果?
我曾尝试过这样做,但并没有成功:
a img{
margin-top: 5px;
}
a img:hover{
margin-top: 0px;
}
但是它没有起作用,即使我将:hover放在链接上而不是图像上。我仔细查看了他的代码和CSS,但我无论如何也无法弄清楚这个问题。请帮忙 :)
position: relative
可以起作用:
a img:hover{ position: relative;
top: -5px;}
请注意,position: relative
会像元素未被移动一样在文档流中保留空间。但是我认为在这种情况下,这不是一个问题。
也可以查看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)
}
查看类似的工作示例:
http://jsfiddle.net/rimian/7aPvS/1/
你也可以使用CSS/HTML5动画:http://slides.html5rocks.com/#css-animation
你还可以将其包装在另一个具有position:relative设置的父div中:
<div class="parent">
<img class="image" />
</div>
.parent {
position:relative;
}
.image {
position:absolute;
top:0px;
left:0px;
}
.image:hover {
top:-15px;
}
你可以使用 id
在 HTML 中
<div id="move"> </div>
CSS中的内容
#move {
position: relative;
top: 0;
transition: top ease 1s;
}
#move:hover {
top: -5px;
}
注意:当我尝试过渡时,它没有起作用,如果您的代码中不使用js,则使用id
没有任何意义。
给图片一个ID:
<img id="imgHover" src="" />
#imgHover:hover { margin-top: -5px; }
请确保在您的HTML中包含此内容,以便IE能够正常工作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
position: relative
的信息,我之前并不知道。+1 - Wextranslate
解决方案,因为它通过GPU进行硬件加速。 - Andy