Grow your CSS skills. Land your dream job.

invert hover state

  • # June 23, 2012 at 11:36 am

    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 = $("
    ").addClass("hoverbgpfthnailmiddle").css({'float':'left', 'line-height':'0', 'background-color':'< ?php echo get_option("bgchanger_color"); ?>'}).append($(this)); //fg_divthumbimgi
    var fg_divhoverbg = $("
    ").addClass("hoverbgpfthnail").css({"background-color" : (srcobj.color)?srcobj.color:"#008eeb" }).append(fg_divthumvsecdiv);
    var fg_divhoverbgmetadata = $("
    ").addClass("hoverbgpfthnailmetadata").html(''+srcobj.thumb_title+''+srcobj.thumb_cats+'+');//.append(fg_divthumvsecdiv);
    var fg_divthumbimg = $("
    ").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 = $("
    ").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:

       







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

    # June 26, 2012 at 11:09 am

    Hi dynamyc!

    While I do enjoy challenges, that code is just too much of a mess to have to deal with… there are also missing functions like fg_imgpreview that aren’t shown in the code.

    Have you considered just using a tooltip to display the image?

    # June 26, 2012 at 5:31 pm

    Not really, what approach do you have for using a tooltip to display the image ?

    # June 26, 2012 at 5:46 pm

    I think this could be done with CSS.

    http://codepen.io/pen/6216/1

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".