Grow your CSS skills. Land your dream job.

How Was This Done?

  • # May 27, 2013 at 5:18 am

    I am working on a website. There is this css effect I want to implement. I know this may be easy and, but I need a little codepen example.

    I want to achieve this effect [here.](http://www.michieldegraaf.com/ “”) Hover over the images.

    Thank u.

    # May 27, 2013 at 5:20 am

    here’s one fairly simple example on how to achieve that effect: http://codepen.io/Melindrea/pen/oDrfJ

    # May 27, 2013 at 7:45 am

    Thank you @Melindrea. I am trying to add transition effect to it, but it’s not working. Have tried add it to the a, a .shown-when-hover, a:hover .shown-when-hover, but it’s not working. You have any idea?

    # May 27, 2013 at 5:27 pm

    http://codepen.io/jimmythenice/pen/dsxLk

    Forked Melindrea’s pen.

    Added transition, slightly changed the method. The div is always visible, but is transparent, but the span inside is hidden. On hover, the div is changing background, thus transition works and span is showed.

    EDIT: The transition didn’t work, because it needs two states in order to work, like white-transparent and black-semitransparent, like in your example. In Melindrea’s pen there is only one background set and div is hidden when not hovered, so transition couldn’t work.

    Have fun!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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