21

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

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

a img{
    margin-top: 5px;
}

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

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

4

6 回答 6

43

position: relative会工作：

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

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

于 2011-03-27T11:54:52.090 回答
17

另见翻译（）：

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/

于 2014-03-10T10:50:18.303 回答
0

您还可以使用 CSS/HTML5 动画：http ://slides.html5rocks.com/#css-animation

您也可以将其包装在另一个具有 position:relative 集的 parentdiv 中：

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

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}
于 2011-03-27T11:59:58.747 回答
-1

您可以使用#

在 HTML 中

<div> id="move" </div>

在 CSS 中

#move {
position: relative;
top: 0;
transition: top ease 1s;
}
#move:hover {
top: -5px;
}
于 2021-08-21T05:26:19.930 回答
-2

给图片一个id：

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


 #imgHover:hover { margin-top: -5px; }
于 2011-03-27T12:02:52.123 回答
-2

确保你的 html 中有这个，以便 IE 知道如何正常工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2012-01-06T23:29:25.477 回答