I use this at work :) IE6+ https://gist.github.com/GrzegorzPerko/7183390
Don't forget about <element class="ahover"><span>Text</span></a> if you use a text element.
.ahover {
display: block;
/** text-indent: -999em; ** if u use only only img **/
position: relative;
}
.ahover:after {
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 0.5s ease 0s;
width: 100%;
z-index: 1;
}
.ahover:hover:after {
opacity: 1;
}
.ahover span {
display: block;
position: relative;
z-index: 2;
}