Grow your CSS skills. Land your dream job.

Nice Image Hover Effect

  • # November 26, 2012 at 3:55 am

    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](http://codepen.io/alexmccabe/pen/KlpwI “yo”)!

    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

    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.

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