Darken Image on Hover – Simple With 2 Blocks of CSS code – No Plugin Required

My setup is WordPress, Astra Pro, Gutenberg and Spectra free on self-hosted. I was looking for a simple solution to darken images on hover. I knew this was achievable using Spectra, but I wanted an easier solution. I searched the internet using the keyphrase darken image on hover and found multiple references on how to do this. The problem was that they all involved multiple blocks of CSS code. I knew there had to be a simpler solution.

Using the many sources I found, I stripped down the CSS to just two blocks of code, and by adding a class to the images I wanted to darken on hover, I achieved this.

Darken Image on Hover With CSS – Steps To Achieve

The second step was to add the CSS. In my case, I added the CSS to my child theme, although I could have done this under Additional CSS in the customiser.

CSS to Darken Image on Hover and Make Image larger on Hover

Bonus tip: Also make the image larger on hover with CSS.

/* Darken image on hover and make image bigger on hover by using a class */

.darker-90:hover {
  filter: brightness(90%);
  transform: scale(1.02);
  }

.darker-90 {
  transition-duration: 0.3s;
  }

Explanation of the CSS

The first block of CSS reduces the image brightness by a subtle 10 per cent on hover. The transform aspect scales the image to be slightly bigger on hover. In many cases you will want to keep the scale to a low number to stop images going outside the viewport, which could easily happen when viewing on a mobile phone.

The second block of CSS dictates how long it will take the image to transition to darker. In this case, the transition time is 0.3 seconds.

The rationale for using the class of darker-90 is in case I want to have a different level of darkness for different images. In that case, I could call the class, for example, darker-80 and change the brightness value to 80 per cent, to reduce the brightness by 20 per cent.

You could change the filter: brightness element of the CSS to show a lighter image on hover by giving a percentage of 110. I prefer making the images darker on hover. The reason is that an image already light around the edges might lose contrast against a white page background. This could happen where the sky is more white than blue, as in the image example used on this page.

Example of CSS Code to Darken Image on Hover and Show Bigger Image on Hover

If you are on a desktop computer, you can hover over the image with your mouse, and observe the subtle change in brightness and size.

I am somewhere in the intermediate level of CSS knowledge so I do not assume that the CSS examples in this post are necessarily of best practice. However, this solution does work for me.

Let me know in the comments section below if you have found my solution useful or if you have a better way of achieving this. I would love to hear from you.

External Links

WordPress.org Image Block documentation.

Related articles in Computers and Internet. View all in this subject.