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//
    [http://jsfiddle.net/Vk83P/26/](http://jsfiddle.net/Vk83P/26/ “http://jsfiddle.net/Vk83P/26/”)

    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 {
    visibility:hidden;
    }

    .overlay:hover span {
    visibility:visible;
    }

    http://codepen.io/Paulie-D/pen/kldKg

    # June 9, 2013 at 5:29 pm

    Or perhaps something like this: http://codepen.io/Paulie-D/pen/f66a765171c3d3980c825a7c089fc726

    # 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.

    http://codepen.io/Paulie-D/pen/d50e4a1cd986032c74d11e1564e1e65c

    # 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.

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