Using JQuery to add class to and image

Question

I have a logo and had to split it into a top and bottom section to try and achieve a spinning effect on the bottom portion of the logo.

Main goal is to take the bottom saw blade part of my logo and make it spin/rotate on hover.

I can make it spin/rotate, but since the logo is spit into two sections. I have to use z-index to stack the image and the bottom logo will not spin when it is lower than the top image because the top image is blocking the bottom image.

I tried using Jquery to solve the problem, but not to familiar with the coding yet.

Could someone please take a look at this CodePen and help me out.

Here is the link to the Pen / Code: http://codepen.io/daugaard47/pen/yKrdD

If you reverse the z-index you can see the spinning effect.

Thank you. -Chris

Not on a computer to hover, but why not make the bottom half of the top image transparent? — mplungjan
– mplungjan, Commented Jun 2, 2013 at 5:02

Patrick · Accepted Answer · 2013-06-02 05:16:20Z

2

Neat design!

heres a working version http://codepen.io/patrickkettner/pen/byFIl

You were really close - just a couple tweaks. Add the :hover listener to the wrapper, that way you don't need to worry about the stacking. Secondly, add a gpu hack (I used translateZ) to the animated element to prevent any flicker from the element jumping to the gpu to be animated and then back to the cpu to its resting state (check out http://www.youtube.com/watch?v=8uAYE5G1gSs for waaaay more information than you need to know on that topic).

answered Jun 2, 2013 at 5:16

Patrick

14k5 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daugaard47 Over a year ago

Thank you so much! Been trying to figure this one out all night. Really appreciate it.

daugaard47 Over a year ago

Checked out that video to. Understood about a 1/3 of what the hell they were talking about, (lol) but very interesting none the less. Thanks again.

daugaard47 Over a year ago

@ Patrick one more question, different topic hope I don't get flagged for changing topics, but I've been struggling with creating fallback .png's for my .svg's . How would you go about doing this? You can use the same address for the images, just add the .png extension instead of .svg

Patrick Over a year ago

My first instinct would be to check out modernizer

Collectives™ on Stack Overflow

Using JQuery to add class to and image

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related