Get a free trial // Grow your CSS skills // Land your dream job

Image Overlay Span Issue

  • # June 9, 2013 at 5:07 pm

    Here is a fiddle of what I’m playing with//
    []( “”)

    I am not sure how I can hide the “View” text until image hover.

    I’m sure it’s a simple fix but I can’t figure out how to do it…
    Clearly. Lol.

    Also, I used a class of “anim” for the transition. Except it doesn’t even work…

    Any help would be awesome!

    # June 9, 2013 at 5:25 pm

    .overlay span {

    .overlay:hover span {

    # June 9, 2013 at 5:29 pm

    Or perhaps something like this:

    # June 9, 2013 at 5:56 pm

    @paulie_d Thanks Paulie! I’ll use your technique for other projects :)
    I wanted to the overlay to cover the whole image…

    Do you have any idea why “anim” isn’t working though?

    # June 9, 2013 at 6:00 pm

    You can cover the whole image…it’s just a matter of sizing the figcaption to be the same as the image and adjusting the positioning.

    # June 9, 2013 at 6:07 pm

    @paulie_d Awesome. Is figcaption cross-browser friendly ?

    # June 9, 2013 at 6:09 pm

    It is but, to be honest you could do it with a couple of divs if you want.

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