Can I style the alt attribute of an image tag in jquery?

Question

I'm using this Jquery function so show a caption above images using the associated alt tag in the html. I'd like to be able to style the text that shows and was wondering if there is a way to do this. Here is the code I'm using.

$(function () {
    var show = false;
    $(".thumb").mouseenter(function () {
        var $t = $(this);
        var $d = $("<div>");
        $d.addClass("desc").text($t.attr("alt")).css({
            width: $t.width(),
            height: $t.height() - 20,
            top: $t.position().top
        });
        $t.after($d).fadeTo("fast", 0.3);
        $d.mouseleave(function () {
            $(this).fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.3);
        });
    });
    $('#caption-toggle').click(function() {
        if (!show) $('.thumb').trigger('mouseenter');
        else {
            $('.thumb ~ div').fadeOut("fast", 0, function () {
                $(this).remove();
            }).siblings("img.thumb").fadeTo("fast", 1.0);
        }   
        show = !show;
    });
});

Most people have answered no to similar questions on this site, but I wanted to ask for myself to make sure whether this is possible or not. Cheers!

Answer 1

Try to find out how the function works, that will save you lots of time in the future. I see you've got more questions about the very same function, which all wouldn't have been necessary if you already knew how it worked.

(Sorry, in case you didn't realise, that was tongue in cheek. Because the same thing is true for every other question here on StackOverflow!)

Anyway, the trick is to make the outer div position:relative so that the inner divs are positioned in the same spot. Then all you need to do is put them in the middle, for instance by setting the line-height to the same value as the height of the image. And with absolute positioning, you won't need the z-index.

Resulting fiddle here