CSS zoom not blurry but pixelated

Question

I'd like to use zoom property in CSS for images but would not like to have a blurry effect to enlarged images but rather pixelated. How can I achieve this?

edit: if neccesary, it is ok to use other properties or other languages.

Answer 1

You cannot (currently) use upscaling and specify that the browser should use nearest-neighbor zooming, neither with HTML images, upsized HTML5 canvases, using drawImage() on a canvas to draw the image larger, nor zooming up images on SVG.

Here's a solution (written for this related question) showing how to 'zoom' an image using nearest-neighbor pixelation by re-creating the image as rectangles in SVG: http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

Here's another solution showing how to achieve this same effect using HTML5 Canvas (drawing rectangles on the canvas for the zoom):
http://phrogz.net/tmp/canvas_image_zoom.html