CSS div 从一个位置到另一个位置

Question

我正在尝试做一个图像悬停效果，其中链接从顶部移动：0到顶部：40%。问题是当我悬停在图像上时，链接直接出现在顶部：40%。 这是我的代码：

<div class="featured">
<div class="img-hover">
<a href=""><i></i></a>
</div>
<img src=""/>
</div>
.featured .img-hover {
width:100%;
float:left;
height:100%;
position:absolute;
display:none;
background:rgba(26, 188, 156, 0.6);
}
.featured:hover .img-hover {
display:block;
}
.featured .img-hover a{
width:50px;
height:50px;
float:left;
position:absolute;
top:0;
font-size:2rem;
line-height: 4rem;
opacity:1;
margin-right:20px;
border-radius:50px;
border:2px solid #fff;
color:#fff;
text-align:center;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.featured:hover .img-hover a{
top:40%;
}

Answer 1

您的过渡是在 a 标签上，它在".feature.img-hover"级别上效果更好。 此外，"display：none"的转换效果不佳。 我更新了它以从不透明度 0 过渡到 1，它看起来更好。 下面是JSFiddle和小更新的CSS。 如果您愿意，请看一看并进行调整。

http://jsfiddle.net/UVjFz/

.featured .img-hover {
    width:100%;
    float:left;
    height:100%;
    position:absolute;
    opacity:0;
    background:rgba(26, 188, 156, 0.6);
}
.featured:hover .img-hover {
    display:block;
}
.featured .img-hover a{
    width:50px;
    height:50px;
    float:left;
    position:absolute;
    top:0;
    font-size:2rem;
    line-height: 4rem;
    opacity:1;
    margin-right:20px;
    border-radius:50px;
    border:2px solid #fff;
    color:#fff;
    text-align:center;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}
.featured:hover .img-hover a{
    top:40%;
}
.featured:hover .img-hover {
    display:block;
    opacity:1;
}
.featured .img-hover {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;  
}