CSS-only: lighten icons on hover

2018-10-27

HTML

<img class="icon" src="housee.png">

CSS

.icon-with-lighten-effect:hover {
  cursor: pointer;
  filter: brightness(150%) saturate(150%);
}

Result

Icon with Houseey, the house shaped Daily CSS mascot. — Mouse over the image and notice how it changes slightly, hinting that it is interactive.

The filter property is used lighten the image when the mouse hovers over it. In combination with cursor: pointer, this helps indicate that it is possible to click on an icon. The filter property is far more versatile than what’s covered above. The available filter functions include: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia.