Is it possible to create a cross-fade effect for a background image using CSS3 transitions?
I am looking to achieve an effect similar to the "twitter hover" in this video: http://youtu.be/uCcQHXeiPTY
For example, transitioning from opacity 0.5 to 1.
I am new to CSS3 and would appreciate any help.
HTML & CSS
<div id="social-contacts">
<ul>
<li id="fb"><a href=""></a></li>
</ul>
</div>
#social-contacts{
width: 375px;
float: left;
margin-left: 50px;
margin-top: 100px;
}
#social-contacts li{
float: left;
list-style: none;
}
#social-contacts li a{
display: block;
}
#fb a{
background: url("http://athimannil.com/page/images/social-icons.png") 0 0;
width: 45px;
height: 45px;
opacity: 0.8;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#fb a:hover{
background-position: 0 47px;
opacity: 1;
}