The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 animation using :hover and :after/:before psuedo classes

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #31028

    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…
    (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!


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


    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.


    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?


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


    @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…


    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!


    @arronsilber – Did you ever get this figured out?



    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!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.