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

我正在尝试做一个图像悬停效果，其中链接从顶部：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%;
}

.特色。img悬停{
宽度：100%；
浮动：左；
身高：100%；
位置：绝对位置；
显示：无；
背景：rgba（26188156,0.6）；
}
.特色：悬停。img悬停{
显示：块；
}
.特色。img悬停a{
宽度：50px；
高度：50px；
浮动：左；
位置：绝对位置；
排名：0；
字号：2rem；
线高：4rem；
不透明度：1；
右边距：20px；
边界半径：50px；
边框：2倍实心#fff；
颜色：#fff；
文本对齐：居中；
过渡：所有0.5s缓解；
-webkit过渡：所有0.5s都可以轻松过渡；
-moz过渡：所有0.5s的缓变；
-o型过渡：所有0.5s缓解；
}
.特色：悬停。img悬停a{
最高：40%；
}

您的转换在a标签上，仅在“.featured.img hover”级别上效果更好。此外，“display:none”的转换也不太好。我将其更新为从不透明度0转换为1，看起来更好。下面是JSFIDLE和minorly更新的CSS。如果您愿意，请查看并调整

---

你的标记在哪里？

.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;  
}