Images Wiggles When Hover (scale Effect)

My image links are wiggling a bit when I'm hover the images. I don't know how to fix this :/ I'm using the scale effect in css to make the pictures a bit bigger when hover. I've t

Solution 1:

If you're using a webkit browser the following may help. Adding this to the container of the element you are animating should make the animation smoother. As far as I understand it, it forces the browser into using hardware acceleration.

.socialmedia {
     -webkit-backface-visibility: hidden;
}

Solution 2:

It's a common problem with CSS3 transformations. I've notice that after text rotation. And I've found some strange solution. I don't know how this works - but works :) Just use some of CSS3 filters. Any filter. For webkit that would be maybe

-webkit-filter: blur(0px);

http://jsfiddle.net/Rfg2V/

That wouldn't change default blur property, but will cause smooth transformation, translation, and give antialiasing effect.

For Firefox you can use

filter: url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\' values=\'10000010000010000010\'/></filter></svg>#grayscale");

This fixes the problem, but after that elements with filter properties may look a bit blurred. Not because blur filter, result is the same with any filter.

Solution 3:

I know I'm kind of late to the party, but since none of the above worked for me, I'm guessing there must me others having the same issue when using opacity on hover.

The solution that ended up working for me was setting this to the item that was wiggleing:

-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

This is forcing the computer to use the Graphics Processing Unit, instead of the browser running on the CPU.

Read more here: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css