Jquery anchor hover fade

Question

Is it possible to create a jquery "fade" effect on hover (on an anchor with image inside)?

HTML

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
        </a>
    </li>
</ul>

CSS

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a {
    display: block;
    width: 293px;
    height: 170px;
}
#list li a:hover {
    background: red;
    width: 200px;
    height: 50px;
}

Here is what I have so far: http://jsfiddle.net/ecFBK/4/

When you hover over the red appears which is correct - I just don't know how to make it fade in using jquery. Please no CSS3 suggestions.

Answer 1

You can fake it by adding an overlay to the link. You'll need to add position: relative to the link CSS, and remove the a:hover CSS, then you can do something like this for the jQuery:

$('#list li a').hover(function(ev){
    if (!$(this).find('.hover').length) {
        $('<span class="hover">').css({
            'background-color': 'red',
            'display': 'inline-block',
            'opacity': 0,
            'width': 293,
            'height': 170,
            'position': 'absolute',
            'top': 0,
            'left': 0
        }).appendTo($(this));
    }
    $(this).find('.hover').stop(true, true).animate({'opacity': 1}, 2000);
}, function(ev){
    $(this).find('.hover').stop(true, true).animate({'opacity': 0}, 1000);
});

See demo

Answer 2

Impossible with your HTML markup. You need to fadeIn a span element, not an a that actually holds your image!

jsFiddle demo

jQuery:

$('#list li a').hover(function(){
   $('span', this).stop().fadeIn(500);
}, function(){
  $('span', this).stop().fadeOut(500);    
});

HTML:

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
            <span>Description here!</span>
        </a>
    </li>
</ul>

CSS:

#list li a {
    display: block;
    position:relative;
    width: 293px;
    height: 170px;
}

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a span {
    position:absolute;
    left:0px;
    display:none;
    background:red;      
}