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

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Nice Image Hover Effect

  • # November 26, 2012 at 3:55 am

    This reply has been reported for inappropriate content.

    So I spent some time refining your code Paulie_D and now the only size you set is the figure. Using the (old) flexbox syntax to get the figcaption to sit dead center, otherwise you have to change the padding value on the figcaption h3.

    Here it is!

    DeTodo, if you want to use this code, it might be better. A note about the flexbox syntax though, it is deprecated, but all browsers support it. The newer syntax differs, but only Chrome supports it.

    # November 26, 2012 at 7:24 am

    The text doesn’t center on the hover. A possible fix is to apply padding-top. The way you applied the background image prevented changing the value of top to anything other than 0.

    EDIT: Reread your post above. I guess my Firefox doesn’t respect the “old flexbox syntax” haha.

    # November 26, 2012 at 7:47 am

    This reply has been reported for inappropriate content.

    pmac627, ooh I had no idea that Firefox no longer supports the old syntax. Thank you for pointing that out! It’s odd they would remove that, and then not add support for the new syntax.

Viewing 3 posts - 16 through 18 (of 18 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