悬停时将链接图像向上移动 5px

Question

我将如何使用 CSS 和 HTML 实现与本网站的作品集页面 Solid Giant 类似的效果？

我原以为只放这样的东西就可以了：

 a img{
    margin-top: 5px;
}

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

但它不起作用，即使我将 :hover 放在链接而不是 img 上。我搜索了他的代码和css，但我一生都无法弄清楚这一点。请帮忙 ：）

原文由 Amanda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

position: relative 会工作：

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

请注意， position: relative 保留文档流中的空间，就好像元素 没有 移动一样。但我认为在这种情况下，这不是问题。

原文由 Pekka 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

另见翻译（）：

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/

原文由 Rimian 发布，翻译遵循 CC BY-SA 3.0 许可协议