CodePen Embed - Filters: hue-rotate()

<img src="https://images.unsplash.com/photo-1486688680290-be46662593bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<img class="huerotate" src="https://images.unsplash.com/photo-1486688680290-be46662593bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<img class="huerotate1"  src="https://images.unsplash.com/photo-1486688680290-be46662593bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<img class="huerotate2"  src="https://images.unsplash.com/photo-1486688680290-be46662593bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />

img { width: 24vw; }

.huerotate {
  filter: hue-rotate(90deg);
}

.huerotate1 {
  filter: hue-rotate(180deg);
}

.huerotate2 {
  filter: hue-rotate(-90deg);
}

This Pen is owned by Anna on CodePen.

See more by @annafromduomly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.