How to Fix Blurry Transitions on Images in CSS

I had applied a filter property onto an image in CSS. I added a transition to this property, but it resulted in a blurry transition.

This is what my situation looked like.

img {
  filter: grayscale(1) brightness(0.5) opacity(0.7);
  transition: filter 0.2s ease;
}
img:hover {
  filter: grayscale(0) brightness(1) opacity(1);
}

The filter change worked as expected, but the transition was very blurry.

The solution was to apply a 3D translation to the img element.

img {
  ...
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

translate3D() will force hardware acceleration on some devices, using the GPU for CSS transitions. This makes them smoother with higher FPS. The (0, 0, 0) essentially does nothing (well, it moves the image 0px in the x, y, and z axes).

Ultimately, this addition will force our img element to get its own composite layer.