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

Have you ever wanted to add a little spark to your website’s images? We’re talking about a small, professional touch that makes your site feel more interactive without being distracting.

At WPBeginner, we’ve found that a simple fade effect on mouseover is a perfect solution. It’s a subtle animation that gently encourages visitors to engage with your visual content.

This small tweak can make a big difference in your site’s overall feel, and it’s surprisingly easy to set up. You don’t need to be a coding expert to get it done.

In this guide, we’ll show you exactly how to add the image fade effect on mouseover in WordPress.

Why Fade Images on Mouseover in WordPress?

Animations are an easy way to make your website more interesting and can even draw the visitor’s attention toward your page’s most important content, such as your website logo or a call to action.

There are lots of different ways to use CSS animations in WordPress, but adding a hover effect to images is particularly effective. The fade animation means your images will slowly appear or disappear when visitors hover over them.

This encourages people to interact with your images and can even add a storytelling element to the page. For example, different images might fade in and out as the visitor moves around the page.

Unlike some other animations, the fade image on the mouseover effect is subtle, so it won’t negatively impact the visitor’s reading experience or any image optimization you’ve done.

With that said, let’s show you how to add a fade to your images on mouseover in WordPress. Simply use the quick links below to jump straight to the method you want to use:

• Method 1: Adding Image Fade on Mouseover to all WordPress Images
• Method 2: Adding Image Fade Animations to Individual Pages
• Method 3: Adding Image Fade Animations to Featured Images
• Frequently Asked Questions (FAQs)
• Additional Resources for Image Effects & Management

Method 1: Adding Image Fade on Mouseover to all WordPress Images

The easiest way to add a fade effect to all your images is by using the free WPCode plugin. It is the most powerful and user-friendly code snippets plugin for WordPress, and it lets you add custom code without having to edit your theme’s files.

This is much safer because the plugin helps prevent mistakes that can cause common WordPress errors. For more details on all its features, you can read our complete WPCode review.

Expert Tip: At WPBeginner, we use WPCode to manage all the custom code snippets across our portfolio of websites. It’s a reliable way for us to add functionality and make tweaks safely without ever editing a theme’s functions.php file directly.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Here, you will see all the ready-made WPCode snippets you can add to your site. These include a snippet that allows you to completely disable comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.

Simply hover your mouse over ‘Add Your Custom Code’ and then click on ‘+ Add Custom Snippet’ when it appears.

To add custom CSS to WordPress, you need to select ‘CSS Snippet’ as the code type from the list of options that appear on the screen.

Then, on the next page, type in a title for the custom code snippet.

This can be anything that helps you identify the snippet in the WordPress dashboard.

In the code editor, add the following code snippet:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

This code snippet will fade each image for 2 seconds when the user hovers their mouse over it. To make the image fade slower, simply replace ‘2s ease’ with a higher number. If you want to make the picture fade faster, then use ‘1s ease’ or smaller.

You can also make the ‘opacity’ higher or lower by changing the opacity:0.6 line.

If you change any of these numbers, then make sure you change them across all the properties (webkit, moz, ms, and o) so the fade effect looks the same on every browser.

When you are happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

To add a fade effect to all your images, click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

After that, you are ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the CSS snippet live.

Now, if you hover the mouse over any image on your WordPress website, you’ll see the fade effect in action.

Method 2: Adding Image Fade Animations to Individual Pages

Using a fade effect for every single image can become distracting, especially if you have a photo gallery on your website, a stock photo store, or any other site that has lots of images.

With that in mind, you may want to use fade effects on a specific page or post only.

The good news is that WPCode allows you to create custom shortcodes. You can place this shortcode on any page, and WordPress will show fade effects on that page only.

To do this, simply create a custom code snippet and add the fade animation code following the same process described above. Then, click on the ‘Save snippet’ button.

After that, scroll to the ‘Insertion’ section, but this time select ‘Shortcode.’

This creates a shortcode that you can add to any page, post, or widget-ready area.

After that, go ahead and make the snippet live following the same process described above.

You can now go to any page, post, or widget-ready area and create a new ‘Shortcode’ block. Then, simply paste the WPCode shortcode into that block.

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

With that done, either click on the ‘Update’ or ‘Publish’ button to make the shortcode live. You can then visit that page, page, or widget-ready area to see the fade-on mouseover effect.

Method 3: Adding Image Fade Animations to Featured Images

Another option is to add fade animations to your featured images or post thumbnails. These are the post’s primary images.

By fading featured images on mouseover, you can make your site more eye-catching and engaging without animating every single image across your WordPress blog or website.

To add a fade animation to your post thumbnails, simply create a new custom code snippet following the same process described above.

However, this time, add the following code to the editor:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

After that, scroll to the ‘Insertion’ box and select ‘Auto Insert.’

Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

After that, you can go ahead and make the code snippet live using the same process described above.

Now, you can hover the mouse over any featured image to see the fade animation in action.

If you want to add even more image mouseover effects, then see our guide on how to add image hover effects in WordPress.

Frequently Asked Questions (FAQs)

Here are answers to some of the most common questions we get about adding image hover effects in WordPress.

Will adding a fade effect slow down my website?

No, this CSS-based fade effect should not noticeably slow down your website. The code uses simple CSS transitions, which are very lightweight and optimized by modern web browsers.

This method is far more efficient than using JavaScript or large animation libraries for such a simple effect.

How do I apply the fade effect to a single, specific image?

To target a single image, you can assign it a custom CSS class. First, select the image block in the editor and find the ‘Advanced’ panel in the block settings on the right.

In the ‘Additional CSS class(es)’ field, add a unique name like custom-fade-image. Then, modify your WPCode snippet to target this class specifically, like this:
img.custom-fade-image:hover { ... }.

Does the image fade on mouseover effect work on mobile devices?

The ‘mouseover’ or ‘hover’ action is specific to desktop users with a mouse cursor. This effect will not trigger on touch devices like smartphones or tablets because there is no cursor to hover over the images.

However, the code will not cause any issues on mobile. Your images will simply display normally without the fade animation.

Can I use other animation effects besides fading?

Yes, absolutely. Fading is just one of many possibilities you can achieve with CSS.

You can create effects like zoom, slide, grayscale, or apply overlays. For more ideas and code examples, see our detailed guide on how to add image hover effects in WordPress.

Additional Resources for Image Effects & Management

A simple fade is a great start, but there are many other ways to make your images more engaging. If you’d like to explore more advanced options, here are some of our other guides on image effects and management:

• How to Add Instagram-like Photo Filters in WordPress (Step by Step)
• How to Show Before and After Photo in WordPress (with Slide Effect)
• How to Add No Right Click on WordPress Images
• How to Create Interactive Images in WordPress
• How to Easily Add Interactive 360 Degree Images in WordPress

We hope this article helped you learn how to fade images on mouseover in WordPress. You may also want to see our guide on how to organize WordPress files in media library folders and our expert picks of the best featured image plugins and tools for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.