On hover image rotate 45 degrees

Question

I'm trying to rotate an image 45 degree (well actually I really want to make it wiggle back and forth) when I hover over. I tried using CSS with the transform rotate with no luck. Does anyone have any ideas (jQuery, javascript maybe)?

 a:hover{ behavior:url(-ms-transform.htc); /* Firefox */ -moz-transform:rotate(45deg); /* Safari and Chrome */ -webkit-transform:rotate(45deg); /* Opera */ -o-transform:rotate(45deg); /* IE9 */ -ms-transform:rotate(45deg); /* IE6,IE7 */} <div id="main"> <span class="box"><a href=""><img src="blog-icon.png"></img></a></span> </div>

Sushanth -- · Accepted Answer · 2012-11-15 07:19:41Z

4

You seem to be setting the hover to the anchor instead of image..

Instead of

a:hover{

should be

img:hover{

Check Fiddle

answered Nov 15, 2012 at 7:19

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

2 Comments

John Verber Over a year ago

that worked great thanks. If you wanna check out the page it's at: johnverber.com

Sushanth -- Over a year ago

@Verber .. Glad to have helped :)

smilly92 · Accepted Answer · 2012-11-15 07:23:01Z

In webkit browsers,transform is ignored on inline elements.

To make this work you would need to add a { display:block; } to your css. (Inline-block will also work)

Demo: http://jsfiddle.net/6Df6W/

brightboy2004 · Accepted Answer · 2012-11-15 07:27:54Z

Try This:

$("a img").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:45}) }, mouseout : function() { $(this).rotate({animateTo:0}) } } });

jtrick · Accepted Answer · 2012-11-15 07:28:50Z

I've used this several times and it works well:

http://code.google.com/p/jqueryrotate/

$(".box a img").rotate(45);

Collectives™ on Stack Overflow

On hover image rotate 45 degrees

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related