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

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 a self-hosted platform. I was looking for a simple solution to darken images on hover. I knew this was achievable using Spectra, but I wanted a more straightforward solution. I searched the internet using the key phrase 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 fix.

Using the various sources I found, I condensed 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; however, I could have also 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% 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 prevent pictures from extending outside the viewport, which can easily happen when viewing on a mobile phone.

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

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

You can change the filter: brightness element of the CSS to show a lighter image on hover by setting the percentage to 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 using a desktop computer, you can hover your mouse over the image and observe the subtle changes in brightness and size.

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

Do let me know in the comments section below if you have found my solution helpful 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.