Pixelation can be achieved in CSS by following these steps:
- Set
background-imageto a very small image (50px or 100px). - Apply
image-rendering: pixelatedon the element.
This will give you the desired pixelated effect.
Now, I am interested in animating this process by replacing the small image with a larger one once it has finished downloading in the browser:
let img = new Image()
img.src = largeVersion
img.onload = function(){
// set css background-image to the new image perhaps, not sure...
}
However, there are two issues at hand:
- I want to use
background-size: coverfor proper container filling which conflicts with any pixelation animation. transform: scale(0.1)doesn't yield the desired results as it scales the entire element.
My goal is to animate transform: scale(x) from a 50px pixelated image to a 2000px unpixelated image over a specific duration. Yet, my attempts have been unsuccessful so far. Perhaps using background-size might work, but the constraints prevent it.
I’m curious if there is an alternative solution without resorting to JavaScript/canvas like demonstrated in this example.
<style>
div {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div style='background-image: url(/100px.jpg)'></div>