search

liamfiddler / eleventy-plugin-lazyimages

Eleventy plugin that adds blurry placeholders & lazy loading to your images
MIT License
139 stars 29 forks source link

Change className to array #8

Closed nothingrandom closed 4 years ago

nothingrandom commented 4 years ago

lazysizes supports blurring images using the following;

.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

To allow this, you need to add both the lazyload and blur-up class to the image. IMO, the best way to do this is switch className to an array to allow for multiple classes.

nothingrandom commented 4 years ago

Yes, that's a good suggestion. Thanks @liamfiddler