Mootools 1.4.3 Background Fade Effect - css

Question

So I have code to swap the background, the problem I am having is incorporating the fade effect into it. I have messed with it for a while now and I am just getting frustrated. So the code is there, see how you can hack this to work.
Mootools 1.4.3
.socialIconsFB {
float: right;
display: block;
margin: -20px 3px;
width: 48px;
height: 57px;
background-image: url(XXXXXX/social_icons/facebook.png);
}
<div class="socialIconsFB"></div>
$$('.socialIconsFB').each(function(socialIconsFB) {
socialIconsFB.addEvent('mouseover', function() {
this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)", "url(XXXXXX/social_icons/facebook_highlight.png)");
});
socialIconsFB.addEvent('mouseout', function() {
this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)");
});
});

Answer 1

I think that "tween" effects not work with "background-image" but work with "background-color"
I would try in this way:
HTML:
<div class="socialIconsFB">
<span></span>
</div>
CSS:
.socialIconsFB {
float: right;
display: block;
margin: -20px 3px;
width: 48px;
height: 57px;
background-image: url(XXXXXX/social_icons/facebook.png);
}
.socialIconsFB span{
margin:0; padding:0;
opacity:0; filter:alpha(opacity=0);
width:100%;
height:100%;
background-image: url(XXXXXX/social_icons/facebook_highlight.png);
}
JAVASCRIPT:
$$('.socialIconsFB').each(function(socialIconsFB) {
socialIconsFB.addEvents({
'mouseenter': function(){
this.getChildren('span').tween("opacity", 1);
//it could be: this.getChildren('span')[0]
},
'mouseleave': function(){
this.getChildren('span').tween("opacity", 0);
//it could be: this.getChildren('span')[0]
}
});
});