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

Question

我正在尝试做一个图像悬停效果，其中链接从 top:0 移动到 top:40%。问题是当我悬停图像时，链接直接出现在 top: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 标签上，它仅在“.featured .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;  
}