The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Display Text in a Div on Mouseover

  • # February 26, 2013 at 8:46 am


    I’m trying to create a grid of images; When you mouse over an image, text displays in a stationary Div.

    Anybody know how to do this?

    Here’s an example done in Flash:

    # February 26, 2013 at 9:02 am

    Sounds like a job for java script. Or rather jQuery

    # February 26, 2013 at 9:29 am

    I haven’t reviewed the linked article as it doesn’t render well on my phone but from a cursory reading of the OP it sounds like the div will be populated with information on the hovered image BUT the div will have no relationship to the image.

    Hence, JS.

    # February 26, 2013 at 9:36 am

    Can possibly do it without JS. Will create a codepen.

    # February 26, 2013 at 9:56 am

    Yup it’s possible, though the text wouldn’t be easily editable if this is to run via a CMS, you’d have to change the text in the CSS stylesheet instead.

    # February 26, 2013 at 10:04 am

    If you have an image with an ‘alt’ or ‘title’ attribute it shouldn’t be had to populate that attribute text into text in a div….should it?

    Of course, my jQ skills are minimal but I’m sure I’ve seen it done.

    # February 26, 2013 at 10:06 am

    This reply has been reported for inappropriate content.

    I came up with this. It’s very hacky, but it works…

    # February 26, 2013 at 10:08 am

    Ugh….hacky indeed. :)

    As I said…JS is the way. Each image will have it’s own set attributes…it’s just a matter of grabbing them and sticking them/it in as text into another place.

    # February 26, 2013 at 10:15 am

    Quick and dirty jQuery way:

    # February 26, 2013 at 10:17 am

    Using JQ –
    Actually @hugogiraudel‘s is much better.

    # February 26, 2013 at 10:24 am

    This reply has been reported for inappropriate content.

    if you already have jQuery linked, there is this: CLICK ME

    # February 26, 2013 at 10:58 am

    @HugoGiraudel I like that…copied for future reference.

    # February 26, 2013 at 12:05 pm

    # February 26, 2013 at 12:11 pm


    I love solutions that don’t rely on JS/JQ but in practical terms your solution does mean having to update the text for each image if it were replaced.

    Applying an ‘alt’ tag is something that should be done to the vast majority of images by default (that aren’t styling) so the JS solution would seem to be optimal.

    Is your way more work or less?…I’m not sure TBH.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed