Images wiggles when hover (scale effect)

Question

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 hove

Answer 1

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,#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.