Grow your CSS skills. Land your dream job.

CSS3 animation using :hover and :after/:before psuedo classes

  • # December 31, 2010 at 4:00 pm

    Hello all, I was mucking around with an idea I had for a nice hover effect for images, when I found that I couldn’t get :before and :after elements to animate (they snap instantly on hover), but I could use things like -webkit-transform: rotate(10deg). I’m a little confused as to why this wouldn’t work.

    I’ve posted the code on jsfiddle… http://jsfiddle.net/BGmST/
    (Its written for webkit only for now)

    Basically the idea was to have an image, which had multiple (faux) images appear behind it, and when the user hovers over, it cleans them up into a stack. I also thought that the opposite effect (clean image, to messy) may be a nice way to say, “Hey, this image is a part of a group, click here for the next image, view group, etc…”

    So is there any way to accomplish this with pseudo elements only?
    I’d like to keep it all css/html. Thanks!

    # December 31, 2010 at 10:15 pm

    I like the messy to clean effect better. Use transitions to slowly stack them.

    # January 1, 2011 at 2:43 am

    so, here is a version with uglier markup. I just wanted to see it in action… still curious as to the :after/:before solution. http://jsfiddle.net/QQYDQ/

    # January 1, 2011 at 3:43 am

    looks good to me.

    # January 1, 2011 at 3:10 pm

    Thanks Christopher, I imagine using this for smaller photos, and using an n’th-child to alternate the rotations on the ‘images’. I guess this could all be thrown in an ul in that case.

    # January 1, 2011 at 3:37 pm

    Going back to your original question – When trying to animate the :before and :after elements are you taking into consideration that the elements are separate from it’s parent element?

    I assume that this would mean you would have to set starting variables for the pseudo elements for them to animate?

    I could be wrong, but it is a thought?

    # January 1, 2011 at 11:38 pm

    Do have an example clokey2k? I’ve tried something like “.wrap:hover:after” and it works on hover, on the correct element (“:after”), but it doesn’t do so in a smooth, ease-in, kind of way – instead it works like an old-fashioned rollover (directly to hover state).

    # January 2, 2011 at 12:43 am

    Hover my footer (under the 3 header columns at the bottom) for a few seconds, is that what you’re talking about?

    Link Here

    # January 2, 2011 at 1:28 pm

    @aaronsilber I didn’t have an example, it was some theoretical thinking that has been proven wrong! I just had a play and I get the same as you – very harsh :hover states. It might be that the ‘:after’ and ‘:hover:after’ are treated as separate elements so no animation can occur (I think the first pseudo element is destroyed when the :hover:after is created).

    I like what you have done, and I can see that you just want to be able to create the same effect with no extra markup. It my be JS territory…

    # January 2, 2011 at 7:46 pm

    Chistopher – no, hover animations are pretty simple. I was trying to use a hover animation on a pseudo element.

    clokey2k – good thinking, I had theorized the same when I had this all coded in my head. I was surprised! I’ll eventually find a way to do this using pseudo elements instead of extra markup. I know there has to be a way!

    # February 22, 2013 at 8:32 am

    @arronsilber – Did you ever get this figured out?

    # February 26, 2013 at 3:54 pm

    @bbbenji

    It’s been a while since I took a look at this, but I have a good solution for you.

    First off – animating psuedo elements isn’t so much an issue anymore because chrome supports it and I believe others aren’t far behind.

    Secondly – we can’t ‘insert’ psuedo elements on images. Why not you ask? There’s simply nothing to ‘insert’ those elements into. Psuedo elements are actually ‘appended | prepended’ to the inside of the opening and closing tags. Therefore, I’ve created a short plugin to add markup to any items I want to fake that behavior on.

    Hope this helps!

    http://codepen.io/aaronlsilber/pen/AbmyF

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

You must be logged in to reply to this topic.

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