Image Filter Effects

Custom code
1

Hello!

Some CSS here for creating image filter effects. I’ve seen some projects where users have created separate images for rollover effects such as making the image greyscale or a different hue. Below is some code for some different effects on images and make it a rollover affect.

<style>
  [data-id="PASTE WIDGET ID HERE"]>img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  [data-id="PASTE WIDGET ID HERE"]>img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }

  [data-id="PASTE WIDGET ID HERE"]>img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  [data-id="PASTE WIDGET ID HERE"]>img {
    -webkit-filter: saturate(7);
    filter: saturate(7);
  }

  [data-id="PASTE WIDGET ID HERE"]>img {
    -webkit-filter: brightness(1.2) contrast(180%);
    filter: brightness(1.2) contrast(180%);
  }

  img:hover {
    -webkit-filter: none;
    filter: none;
  }
</style>

Here is a really great pen with all of the image affects available in CSS.

5 Likes
2

The Headless Horse is amazing!

3

Thank you! Looking to make this into a series… :wink:

1 Like
4

Keep them coming!!! :rofl: