How to prevent pixelation/blurryness on CSS3 scale

I h开发者_如何学编程ave a CSS rule that makes an image scale on hover by 1.5x. Is there a browser hack or anything that can be done to prevent the image from looking pixelated / blurred?

Thanks in advance.

If you take a 100x100 image and scale it up to 150x150, of course it's going to look blurry. What I would do is start out with a 150x150 image, and scale it down to 100x100 - then on hover, resize it back to 150x150. If that still doesn't look good, then you should make two image files, one large and one small, and swap them out.

There's pretty much nothing you can do that will help an image to scale up. Browsers are very good at scaling images down efficiently, and you shouldn't need to apply any special CSS attributes to get your images to scale down properly. But increasing the size/resolution of an image is something that neither browsers nor CSS can help you with.