- This topic is empty.
December 31, 2010 at 4:00 pm #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… 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!January 1, 2011 at 2:43 am #67978
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:10 pm #67879
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 #67883clokey2kParticipant
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 #67917
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 1:28 pm #67691clokey2kParticipant
@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 #67713
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 #125680bbbenjiParticipant
@arronsilber – Did you ever get this figured out?February 26, 2013 at 3:54 pm #126200
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!
- The forum ‘CSS’ is closed to new topics and replies.