jQuery image hover color overlay

Question

I can\'t seem to find any examples of this having been done anywhere on the internet before but here is what I am going to attempt to do...I\'m trying to go about the cleane

Answer 1

So let's start with slightly simpler HTML:

Here's my solution:

EDIT: With fast fade in, fade out:

$('#special a').bind('mouseover', function(){
    $(this).parent('li').css({position:'relative'});
    var img = $(this).children('img');
    $('
').text(' ').css({
        'height': img.height(),
        'width': img.width(),
        'background-color': 'orange',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0.0
    }).bind('mouseout', function(){
        $(this).fadeOut('fast', function(){
            $(this).remove();
        });
    }).insertAfter(this).animate({
        'opacity': 0.5
    }, 'fast');
});