CSS Onmouseexit Fade out - html

Question

I am trying to replicate (in my own way) the facebook change image on hover element.
But I am trying to make it fade out, which I can't seem to do... I wonder if anyone can help me.
Any help will be appreciated. Preferably I would want to do this without jQuery or JS.
So far I have this (on JSfiddle: http://jsfiddle.net/Blue_EyesWhiteDragon/p05e8n56):
HTML:
<span class="right">
<div class="ui-root">
<img class="profimg" id="profileimg" src="http://i.imgur.com/CabNLvV.jpg" width="130" height="130">
<a href="#" class="ui-link" role="button">
<div class="ui-popover">
<img class="ui-dimg" src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/PuyR8Oy6W1C.png" alt="" width="32" height="32">
<div class="ui-text">Update Image</div>7
</div>
</a>
</div>
</span>
CSS:
.ui-root{
cursor: pointer;
height: 130px;
width: 130px;
}
.ui-root a:link, a:visited {
text-decoration: none;
}
.ui-link{
display: block;
text-align: center;
position: relative;
visibility: hidden;
top: -44px;
width: 130px;
height: 40px;
background-color: rgba(0, 0, 0, 68);
color: white;
opacity: 0;
-webkit-transition: padding 2s, //Contains Hover off | Chrome & Safari
-moz-transition: padding 2s; //Mozilla
-o-transition: padding 2s; //Opera
transition: padding 2s; //IE
}
.ui-img:hover + .ui-link{
zoom: 1;
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.68);
border-radius: 1px;
-webkit-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Contains Hover on | Chrome & Safari
-moz-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Mozilla
-o-transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //Opera
transition: border-radius 2s, background-color 300ms linear, opacity 300ms linear; //IE
}
.ui-link:hover{
zoom: 1;
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.87);
border-radius: 1px;
-webkit-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Contains Hover off | Chrome & Safari
-moz-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Mozilla
-o-transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //Opera
transition: padding 2s, background-color 300ms linear, opacity 300ms linear; //IE
}
.ui-dimg{
display: block;
text-align: left;
position: absolute;
top: 2px;
left: 2px;
}
.ui-text{
display: block;
text-align: left;
width: 108px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 12px;
padding-top: 10px;
top: 2px;
left: -2px;
position: absolute;
font-weight: 700;
font-size: 12px;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
word-wrap: break-word;
}
.ui-popover{
position: absolute;
z-index: 5;
left: 0px;
}

Answer 1

Are you trying to do something like this
.ui-root {
cursor: pointer;
height: 130px;
width: 130px;
}
.ui-root a:link,
a:visited {
text-decoration: none;
}
.ui-link {
display: block;
text-align: center;
position: relative;
top: -44px;
width: 130px;
height: 40px;
background-color: rgba(0, 0, 0, 68);
color: white;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ui-img:hover + .ui-link {
zoom: 1;
opacity: 1;
background-color: rgba(0, 0, 0, 0.68);
border-radius: 1px;
}
.ui-link:hover {
zoom: 1;
opacity: 1;
visibility: visible;
background-color: rgba(0, 0, 0, 0.87);
border-radius: 1px;
}
.ui-dimg {
display: block;
text-align: left;
position: absolute;
top: 2px;
left: 2px;
}
.ui-text {
display: block;
text-align: left;
width: 108px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 12px;
padding-top: 10px;
top: 2px;
left: -2px;
position: absolute;
font-weight: 700;
font-size: 12px;
font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
word-wrap: break-word;
}
.ui-popover {
position: absolute;
z-index: 5;
left: 0px;
}
<span class="right">
<div class="ui-root">
<a href="#" class="ui-img">
<img class="profimg" id="profileimg" src="http://i.imgur.com/CabNLvV.jpg" width="130" height="130"></a>
<a href="#" class="ui-link" role="button">
<div class="ui-popover">
<img class="ui-dimg" src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yx/r/PuyR8Oy6W1C.png" alt="" width="32" height="32" />
<div class="ui-text">Update Image</div>
</div>
</a>
</div>
</span>