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](https://www.tpostmag.com/t-shirt-issues/ “”) 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: http://codepen.io/Melindrea/pen/oDrfJ

    # 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

    Here

    [http://codepen.io/Krish1980/pen/nbksj](http://codepen.io/Krish1980/pen/nbksj “”)

    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.

    http://codepen.io/Krish1980/pen/vuhDi

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

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