I have a set of thumbnails images, now when the image is hovered some text will appear, so what I want to do is invert this behavior, to display the hovered text by default and when the text is hovered to display the image.

The markup for the thumbnails images is generated by some jquery functions and this is what confuses me.

Here is the code:

<?php if($orderby == 'date'){ ?>
            var fg_divthumbimg = $(this).parent().parent().parent();
            fg_divthumbimg.css({'display':'block'});
        <?php }else{ ?>
            var fg_divthumvsecdiv = $("<div>").addClass("hoverbgpfthnailmiddle").css({'float':'left', 'line-height':'0', 'background-color':'<?php echo get_option("bgchanger_color"); ?>'}).append($(this)); //fg_divthumbimgi
            var fg_divhoverbg = $("<div>").addClass("hoverbgpfthnail").css({"background-color" : (srcobj.color)?srcobj.color:"#008eeb" }).append(fg_divthumvsecdiv);
            var fg_divhoverbgmetadata = $("<div>").addClass("hoverbgpfthnailmetadata").html('<span class="thumb_title">'+srcobj.thumb_title+'</span><span class="thumb_cats">'+srcobj.thumb_cats+'</span><span class="thumb_plus">+</span>');//.append(fg_divthumvsecdiv);
            var fg_divthumbimg = $("<div>").attr("class","imgcontainer").attr('rel', srcobj.rel).css({'display':'block', 'visibility':'visible', 'width':'0', 'overflow':'hidden'}).append(fg_divhoverbg);
            fg_divthumbimg.append(fg_divhoverbgmetadata);

            var fg_divhoverbghover = $("<div>").addClass("hoverbgpfthnailiface").hover(function(e){
                g_hover_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            },function(e){
                g_hoverout_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            }).click(function(){
                fg_imgpreview.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));
            });
            if(jQuery.browser.msie){
                fg_divthumbimg.click(function(){
                    fg_imgpreview.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));
                }).hover(function(e){
                    g_hover_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                    e.stopPropagation();
                },function(e){
                    g_hoverout_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                    e.stopPropagation();
                });
                fg_divhoverbghover.unbind('click').unbind('hover');
            }

            fg_divthumbimg.append(fg_divhoverbghover);
            //fg_divthumvsecdiv.append(fg_divhoverbgmetadata);
            $(".imgscontainer").append(fg_divthumbimg);
        <?php } ?>

        //var fg_thumbimgpr = $(this).parent().parent(".imgcontainer");
        var fg_thumbimgpr = fg_divthumbimg;
        $(this).css({width: newimagewidth+'px'});
        fg_thumbimgpr.css({'visibility':'visible', width: newimagewidth+'px'});
        if(!navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)){
            $(this).css({'opacity':0}).animate({'opacity':1}, 400);
        }

    };

And this is the generated html code for a thumbnail:

   <div class="imgcontainer" rel=" all july " style="overflow: hidden; display: block; visibility: visible; width: 306px; ">
    <div class="hoverbgpfthnail" style="background-color: rgb(130, 187, 228); opacity: 1; ">
    <div class="hoverbgpfthnailmiddle" style="float: left; line-height: 0; background-color: rgb(0, 0, 0); ">
    <img class="pf_img" id="post-id-3370" style="cursor: pointer; width: 306px; opacity: 1; " src="http://whiteandgold.ro/ipp/wp-content/themes/konzept/image.php?width=400&amp;height=300&amp;cropratio=4:3&amp;image=http://whiteandgold.ro/ipp/wp-content/uploads/2012/06/fiestadelaqua.jpg"&gt;
    </div></div>
    <div class="hoverbgpfthnailmetadata" style="display: block; top: -7.2486857142857275px; opacity: 0; left: -307px; ">
    <span class="thumb_title">Fiesta del Agua</span><span class="thumb_cats">JULY</span><span class="thumb_plus">+</span>
    </div>
    <div class="hoverbgpfthnailiface"></div>
    </div>

You can see a live version here: Could you give me some suggestions, tips on how I can change this ?