CSS-only: lighten icons on hover

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.

Leave a Reply

Your email address will not be published.

Color scheme: