How to Fade Images on Mouseover in WordPress (Simple & Easy)

here are the steps on how to fade images on mouseover in WordPress:

1. Go to your WordPress dashboard and click on Appearance > Customize.
2. In the Customizer, click on Additional CSS.
3. In the Additional CSS section, paste the following code:

Code snippet

.image:hover {
  opacity: 0.6;
  transition: opacity 2s ease;
}

Use code with caution. 

This code will fade each image for 2 seconds when the user hovers their mouse over it. To make the image fade slower, simply replace 2s with a higher number.

4. Click on Publish to save your changes.

Now, when you hover your mouse over any image on your WordPress website, it will fade to 60% opacity.

Here are some additional tips:

• You can change the opacity value to anything you want. For example, to make the image fade to 100% opacity, you would use the following code:

Code snippet

.image:hover {
  opacity: 1;
  transition: opacity 2s ease;
}

Use code with caution. 

• You can also change the transition speed by changing the 2s value. For example, to make the image fade in 1 second, you would use the following code:

Code snippet

.image:hover {
  opacity: 0.6;
  transition: opacity 1s ease;
}

Use code with caution. 

• If you want to fade all images on your website, you can use the following code instead:

Code snippet

img:hover {
  opacity: 0.6;
  transition: opacity 2s ease;
}

Use code with caution. 

This code will fade all images on your website when the user hovers their mouse over them.

I hope this helps! Let me know if you have any other questions.

Do you want a website for your business ? Get started now.