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

This Type of Hover

  • # March 22, 2013 at 4:52 am

    Can someone tell me how I can easily code this type of hover [here]( “”) in css. Hover over the people.
    A codepen example will be appreciated.

    # March 22, 2013 at 5:16 am

    I get a security warning with that link.

    # March 22, 2013 at 6:06 am

    Hopefully this’ll show the idea:

    # March 22, 2013 at 7:23 am

    @Melindrea, thank you so much.

    # March 23, 2013 at 2:08 am

    Ok. I tried adding transition to the hover, but it’s not working. I want to hover effect to hav a smooth transition. Can anyone help with the above codepen by Melindrea?

    # March 23, 2013 at 2:41 am

    I doubt you can get a smooth transition with display. If you give a left position -999em on normal, and a 0px on hover, you’ll be able to get a smooth transition.(using the opacity transition property of course)

    Edit: Left:-999em will not make it fade out. Make it 0, and let the opacity transition do the rest.

    # March 23, 2013 at 2:52 am

    any code snippets?

    # March 23, 2013 at 2:56 am

    I’m making a code pen. Will post asap.

    # March 23, 2013 at 3:12 am


    []( “”)

    Please note: I am unable to make it ease out – perhaps there’s a flaw in my css, so I hope some of the experts might be able to fix that.

    Edit – solved it. But I’m not sure if this method is right.

    # March 23, 2013 at 3:58 am

    Thank u.

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