Mouseover Image Brightness Change

When a mouse goes over an image, the image can change its brightness. When the mouse goes elsewhere, the image brightness can be restored.

The CSS is the filter:brightness() declaration. The img attributes are onmouseover and onmouseout.

Here is a demonstration.

Put the mouse pointer over the image to see it brighten. Send the pointer elsewhere to restore the brightness. If you are using a phone instead of a computer, you are unlikely to have a mouse.

Here is the code for the demonstration.

<img 
   onmouseover="this.style.filter='brightness(120%)'" 
   onmouseout="this.style.filter='brightness(100%)'" 
   src="https://willbontrager.com/coverimages/MessengerWill/CoverMessengerWill-200w.jpg" 
   style="max-width:100%;" 
   alt="Book cover, 'Messenger Will' by Will Bontrager">

The CSS brightness() function expects a percentage of brightness (no number means no change). 100% is the actual brightness of the image. Less than 100% is less bright. More than 100% is more bright.

The onmouseover value in the demonstration is brightness(120%). It makes the image slightly brighter. The onmouseout value is brightness(100%). It restores the image's natural brightness.

The filter:brightness() declaration is used to set the image's initial brightness when you want it different from its original luminosity. As an example, if you wanted to load an image a bit darker than its natural brightness, you would specify style="filter:brightness(70%);" declaration (or different percentage under 100%; 0%=black).

You're not restricted to images. The filter:brightness() declaration and the onmouseover and onmouseout attributes for changing brightness can be applied to divs, tables, and other HTML elements. This article's focus is images.

(This content first appeared in Possibilities newsletter.)

Will Bontrager