My wordpress gallery page images are blurry

Question

I have done my gallery page with Media grid plugin in wordpress, but after the gallery published in the page, the thumbnail images are bit blurry (but lightbox images are okay), so i want it to be fixed by CSS code. i have attached the screen shot.

Answer 1

The browser applies anti-aliasing to resized images by default to make them look better. If you prefer to undo this behavior, use the image-rendering css property to undo the anti-aliasing.

img {
  image-rendering: pixelated;
}

Here's an article with a good explanation:

https://css-tricks.com/almanac/properties/i/image-rendering/

---

A better way to resolve this (for performance) would be to use a lower resolution image file for your thumbnail, and only load the full sized image when the lightbox is opened.

Answer 2

It may be for the resize action ( little picture that stretches ) .

It is not related to CSS but you can set your thumbnail size by sth like this in functions.php :

add_image_size( 'category-thumb', 300, 9999 );