A simple fade-in or fade-out animation when a user moves their mouse over an image can make your site more engaging. It also encourages visitors to interact with your content, which can keep them on your site for longer.

In this article, we’ll show you how to add a fade image 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 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.

Adding Image Fade on Mouseover to all WordPress Images

The easiest way to add a fade effect to all your images is by using WPCode. This free plugin allows you to easily add custom code in WordPress without having to edit your theme files.

With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.

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, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

We need to add custom CSS to WordPress, so open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

In the code editor, add the following code snippet:

.post 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’re 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.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

After that, you’re 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.

Adding Image Fade Animations to Individual Pages

Using a fade effect for every single image can become distracting, especially if you’re running a photography 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.

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 image and they often appear next to the heading on your home page, archive pages, and other important areas of your website.

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.

Bonus: Animate Any Image, Text, Button, and More

Fade effects are a fun way to make images more interesting, but there are lots more ways to use animations in WordPress. For example, you might use flipbox animations to reveal text when a visitor hovers over an image, or use zoom effects so users can explore a picture in more detail.

If you want to try different effects, then SeedProd has over 40 animations that you can add to images, text, buttons, videos, and more. You can even animate entire sections and columns with just a few clicks.

Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.

You can then go ahead and click to expand the ‘Animation Effects’ section.

After that, simply choose an animation from the ‘Entrance Animation’ dropdown, including a wide range of different fade effects.

For more information, please see our guide on how to create a landing page with 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 choose the best web design software, and our expert picks of the best WordPress popup plugins.

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.

The post How to Fade Images on Mouseover in WordPress (Simple & Easy) first appeared on WPBeginner.

The post Yellow Pencil Review: Easy CSS Customization With Visual Editing appeared first on Learn WordPress with WPLift.

The post CSS Hero Review: Makes Theme And Plugin CSS Beginner-Friendly appeared first on Learn WordPress with WPLift.

The post Weekly WordPress News: Gutenberg Gets More Public In WordPress 4.9.5 appeared first on Learn WordPress with WPLift.

The post How To Add Custom CSS To WordPress: 4 Methods For Different Needs appeared first on Learn WordPress with WPLift.

What is Smooth Background Color Change Effect?

Smooth background color change effect allows you to automatically transition between different background colors. The change happens slowly going through different colors until it reaches the final color. It looks like this:

This technique is used to capture user attention with gentle effects that are pleasing to the eye.

That being said, let’s take a look at how to add this smooth background color change effect in any WordPress theme.

Adding Smooth Background Color Change Effect in WordPress

This tutorial requires you to add code in your WordPress files. If you haven’t done this before, then please take a look at our guide on how to copy and paste code in WordPress.

First, you need to find out the CSS class of the area that you want to change. You can do this by using the Inspect tool in your browser. Simply take your mouse to the area you want to change and right click to select the Inspect tool.

Next, you need to write down the CSS class you want to target. For example, in the screenshot above we want to target the widget area in the bottom which has the CSS class ‘page-header’.

In the next step, you need to open a plain text editor on your computer and create a new file. You need to save this file as wpb-background-tutorial.js on your desktop.

Next, you need to add the following code inside your JS file:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
			colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

If you study this code, then you will notice that we have used the CSS class we want to target in the code. We have also added four colors. Our smooth background effect will start from the first color, then transition to the next color, and keep cycling through these colors.

Don’t forget to save your changes to the file.

Next, you need to upload wpb-bg-tutorial.js file to your WordPress theme’s /js/ folder using FTP. If your theme doesn’t have a js folder inside it, then you need to create one.

After uploading your JavaScript file, it is time to load it in WordPress.

You need to add the following code to your theme’s functions.php file.

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

This code properly loads the JavaScript file and the dependent jQuery script that you need for this code to work.

That’s all, you can now visit your website to see it in action. You will notice the smooth background color change effect in the area that you targeted.

There are many other ways to use background colors in WordPress to capture user attention or make your content pop-out. For example, you can try:

• Add fullscreen background images
• Add fullscreen video backgrounds
• Random background colors on each page load
• Add parallax effects to any WordPress theme
• Style individual posts with different backgrounds

We hope this article helped you learn how to easily add smooth background color change effect in WordPress. You may also want to see our list of the best WordPress page builder plugins that you can try.

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.

The post How to Add Smooth Background Color Change Effect in WordPress appeared first on WPBeginner.