Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Add Image Hover Effects in Elementor with WordPress

How to Add Image Hover Effects in Elementor with WordPress

Are you looking for an easy way to add image hover effects in WordPress? If so, the Image Hover Effects for Elementor plugin is exactly what you are looking for.  It’s simple to use and offers a variety of Elementor hover effects to choose from.

These can help you add important information to images like location, price, availability, and more. It really does open up a new level of customization in regards to your images.

Today, I will demonstrate how to add image effects with Elementor in WordPress.

What Are Image Hover Effects in WordPress?

An image hover effect is an interactive element that allows you to display additional information about an image in a stylish manner. There is a wide variety of hover effects to choose from, and they don’t slow down your website or clutter your design.

Normally, an animation will cause some form of a slowdown, but that’s not the case with these CSS effects.

Thus, they are perfect for every website’s needs.

There are a variety of uses for them. For example, if your website focuses on photography, you can add an image hover effect to show where the photo was taken, the date, or something else.

Another great use is for product information. You can add an image of a product and use the hover effect to display when it is available for order, its price, or something else.

The only limit is your creativity.

How to Add Elementor Hover Effects

Step 1: Installing Image Hover Effects

The Image Hover Effects – Elementor Addon plugin is amazing. As the name implies, it is an addon for Elementor Website Builder, which is one of, if not the best website builder for WordPress. Thus, you must have both installed.

The plugin offers 40 different hover effects including fade, zoom, blur, and more. You can add a title, description, set a title tag, add icons, link to other pages (great for products or affiliates), among other things.

It also comes with a new widget you can take advantage of if you want to see the effects in your footer or sidebar areas.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Image Hover Effects in the available search box. This will pull up additional plugins that you may find helpful.

Image Hover Effects

Scroll down until you find the Image Hover Effects – Elementor Addon plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

If you do not have the Elementor Website Builder plugin installed, you will see a notification at the top of every page telling you to install it. It is required.

Install Elementor

Step 2: Add the Image Hover Effects Widget

Luckily, adding hover effects is really easy. To be clear, you cannot simply add a hover effect to an existing image. Instead, you will need to reinsert the image with the appropriate widget within the Elementor editor.

As a result, you may have to do some media library digging to find older images, but it shouldn’t be too bad. This means if you want to add this feature throughout your website, it will take quite a bit of time.

Go to any existing post or page on your website. You can also create a new one for testing. Once on it, click on the “Edit with Elementor” button.

Edit with Elementor

This will open the Elementor editor. On the left-hand side, search for Image Hover Effects and drag the widget into the page or post.

Image Hover Effects

Your now ready to start customizing the widget and all of the settings can be found on the left-hand side.

Step 3: Set up Image Hover Effects

Going through the settings should only take a minute or two, and they’re easy enough for anyone to understand.

The first option is the effects. As I said before, there are 40 to choose from and they appear in a drop-down box. Select the one you want to use.

Note: You can see what the effect does by selecting it and hovering over the widget you added to your post or page. I recommend testing them all if you have the time.

Add Effects

The next option is to add the actual image. Simply click on it and select an image from your media library. Underneath it, you can select the size of the image.

Add Image

Next, you can add a title and title tag. The title is what will appear in the header text, while the title tag is the type of header it will appear as (H2, H3, H4, etc.).

Add Title

Afterward, you can find a description. This is where you can add a lot of additional information, but I personally recommend keeping it short and to the point. Enter the description information.

Enter Description

Next is the icon settings. Here you can add an icon to your title. It will only appear before (to the left of the title) or after (to the right of the title).

Note: If you do not see the icon appear when you hover over the image, that is because of a recent Elementor update. To fix this, click on Elementor > Settings > Advanced and Enable Load Font Awesome 4 support.

Add Icon

And lastly is the link to option. This is how you can turn your image into a link to another page or website. It’s great for a sales page or affiliate link.

Feel free to leave this blank if you do not want to add a link.

Add Link

That covers all of the settings, click on the Save or Update button and you can view it on your website.

Image Hover Effects

Congratulations on adding image hover effects with Elementor in WordPress.

Every Image Does Not Need A Hover Effect

Like most effects, you can have too much of a good thing. Hover effects can help in many areas of your website, but it is worth pointing out it can also come off as annoying to some visitors.

For example, it’s quite common for a user to leave their mouse in the middle of a page when they scroll down. They could unintentionally trigger hover over effects as they go down the page. While it is simple enough to move your mouse, it can get annoying.

The same also goes for turning images into links. A visitor may think that clicking on an image may enlarge it or zoom in. Being directed to another page could be very bothersome.

You simply need to find the right balance for your website and remember to listen to user feedback and study how your pages are being interacted with.

Be Consistent with Effect Usage

Once you find that perfect formula for success, you need to be consistent.

It can be very confusing for visitors who don’t know which images will have additional information or not. In fact, some might not even know that you have hover effects on your website.

To fix this, you can try adding some kind of indication before or under your images to tip visitors off. It can really help you make the most out of the feature.

How easy did you find the Image Hover Effects Elementor Addon to use? What do you use hover effects on your website for?

Author: Robert Giaquinto

Robert has been writing tutorials about WordPress and other CMS for over 3 years since joining the GreenGeeks marketing team. Thanks to this, he has had the opportunity to research and master several areas of WordPress including plugin usage, SEO, website design, and social media integration. When he is not creating content for WordPress, Robert is digging up new content ideas for environmental pieces. These range from the pollution in our air to the danger’s wildlife face. And with a bachelor’s degree in electrical engineering, he is always eager to discuss the way our technologies are affecting the environment, especially when it comes to solar energy.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.