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

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

Responsive image description, unwanted gaps

  • # March 13, 2013 at 12:00 pm

    Trying to make a simple, gracefully degrading “hover-this-thing-and-see-some-sort-of-description-thing” (If there is a name for these things let me know).

    However, I keep getting some gaps below each item which, obviously, I don’t really want.

    # March 13, 2013 at 12:10 pm

    This reply has been reported for inappropriate content.

    @Dennis, just add display: block; to the img tag..

    I believe you can also use vertical-align: bottom;

    # March 13, 2013 at 12:26 pm

    There are number of solutions depending on what is being hovered so you don’t need all that extra mark-up.

    It looks like you want an ‘overlay’ rather than a ‘tooltip’.

    # March 14, 2013 at 6:32 am

    @ChrisP – Nice catch, it’s way to easy to get code blind!

    @Paulie_D – Why I never thought of using the figure element is beyond me, definately the right way to go in this case!

    # March 14, 2013 at 6:48 am

    The beauty of the figure/figcaption is that the text is readable by screen readers as well although the [alt] tag would work just as well.

Viewing 5 posts - 1 through 5 (of 5 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