How to display text over a faded image on hover using jquery

Question

I have a picturelink that fades opacity on hover. What I need is for text to be displayed over it. Here is an example of what I want: http://kspla.tumblr.com/ My code below fades the opacity to 40% but I have no idea how to get text to be displayed over it.

<script type="text/javascript">

$(document).ready(function() {
    $('#wb_Image2, #wb_Image3 a img').animate({
        opacity:1
    
    });
    
    $('#wb_Image2, #wb_Image3 a img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
    
    }, function() {
        $(this).stop().animate({opacity:1},500)
    
    });


});

Thanks in advance.

Answer 1

It's good to remember that if you're handling how things look, chances are it should be done in CSS (which will make your life easier in the long run).

I've mocked up an example here: http://jsfiddle.net/HAcE2/

You basically need to create a box that appears when you hover. By using position:absolute you can get the box to appear over the top and using CSS we can get it to appear when we hover over.

Answer 2

Set the text inside a span or a div and position it absolutely corresponding to the container which is relatively positioned.

Then hide or show the corresponding text

$(document).ready(function () {
    $('#wb_Image3 a img').hover(function () {
        $(this).stop().animate({
            opacity: .4
        }, 200);
        $('.text').removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

Check Fiddle