How Was This Done?

[CodeGraphics]

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.

[CodeGraphics]

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?

[jimmy]

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!

[Author]

Posts