css div from one position to another - css

Question

I'm trying to do an image hover effect in which a link move from top:0 to top:40%.The problem is that the link appear directly on top:40% when I hover the image. This is my code:
<div class="featured">
<div class="img-hover">
<i></i>
</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

Your transition is on the a tag, it works better on just the ".featured .img-hover" level. Also, the transition of the "display:none" wasn't working well. I updated it to transition from opacity 0 to 1, and it looks better. Below is the JSFiddle and minorly updated CSS. Take a look and tweak if you'd like.
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;
}