Subscribe to Our YouTube Channel

Web design has come a long way since the early static HTML websites. Today web designers are required to pay great attention to the interaction design element of the websites they create. One of the biggest parts of interaction design includes creating a separate style for hover states. The hover state determines how different website elements react when being hovered over by the user’s cursor.

In our latest release, we’ve made adding hover effects to WordPress much easier, allowing you to incorporate a large array of hover effects with absolutely zero coding. In this post, I want to go over the various hover effects we’ve added, so you have an idea how to best incorporate them in your next project.

Types of Hover Effects

The hover effect variations we’ve added include:

  • Background color hover
  • Background gradient hover
  • Image and video hover
  • Color overlay hover
  • Box shadow hover
  • Border hover

These six variations are available across sections, columns and most widgets. 

You may wonder what the impact hover effects have on site stickiness, bounce rate and possibly even conversion. We haven’t thoroughly checked this yet, but Envato did list hover effects as one of 4 top design trends to boost conversion rates.

Hover Effects in Action

Let’s go over some of the effects that can be added to WordPress using Element Hover.

Color Hover Effect

Background color hover effects

Visitors browse through your website not only with their eyes, but with their mouse as well. By adding a color transition hover effect to the section they hover over, you are giving them a much more rewarding and interactive experience. The section they hover over can suddenly light up and get an additional focus and emphasis.

Instruction: Go to Section > Style > Background > Hover, and set a color of #49a9e5, with transition duration of 1.5

01

HOVER

02

OVER

03

US

Background column color hover

In this example, you see how feature boxes get highlighted when you set the column hover color to a bright yellow instead of the previous gray. Feature sections are always more problematic when it comes to getting the attention of the user, because they are made up of mostly text. By creating high-contrast column colors you can keep your visitors’ attention at a constant high.

Instruction: Go to Column > Style > Background > Hover and set the color to #f1c40f

i 02 Introducing Hover Effect: Boost Your Interaction Design 1

Border Hovers

Click edit button to change this text. Lorem ipsum dolor sit amet,
consectetur elit. Ut elit tellus, luctus nec ullamcorper

Border hover effect

Borders are also a great way to achieve focus and interest. Here is another example of creating an attention grabbing feature box using a simple left border color. This use of the border hover has a decorative and stylish feel to it, and is great when creating landing pages and websites in the fields of design and technology. It’s subtle, so it also fits minimalist styled websites.

Notice that in this example, we have added a left blue border to hover for the columns that on their normal state had no border. This causes the entire content of the column to be pushed to the right, adding to the overall movement effect.

Instruction: Go to Column > Style > Border > Hover and set a solid left border of 8 pixels

Overlay Color Hover

Background overlay hover effects

The hover overlay effect is a great addition to image, video and gradient backgrounds. Even though it is less predominant than the other types of hover effects, it is still effective in bringing added engagement to your sections. 

Instruction: Go to Section > Style > Background Overlay > Hover and set the color to #3820a3, with opacity of 0.6 and transition duration of 1

WordPress Hover Effects Color

Box shadow hover effect

By combining box shadows hover and grow animation hover, we’ve made the images appear as if they are elevated off the ground. I recommend you read this article in SmashingMagazine, explaining how box shadows can inform the visitor regarding the functional aspects of the design.

Instruction: Go to Image > Advanced > Border > Hover and set the color to #7F7E7F, with blur 30, spread 6 and vertical 20

Generating Motion

Image position hover

By using the same image on normal and hover states, and changing the position of images on hover, you can create a smooth animated motion when the image is hovered over. 

Instruction: Go to Section > Style > Background > Hover, set the same image for normal and hover, and for hover set the position to Bottom-Center

Creative
Combinations

Before & after image hover effect

Hover effects let you experiment with image transitions: from black and white to colorful , from before to after images. The ability to switch between normal and hover images open up a lot of creative possibilities of design, that we only touch upon in this post.

Instruction: Go to Section > Style > Background, set the Normal image to be the black and white version, and the hover version to be the colorful version

How Element Hover Works

Element hover is actually not a new thing in Elementor. We had already included it in certain widgets, like in the button widget and with hover animation.

With the newly added hover, You can now add hover effects to any element inside the page, including for sections, columns and widgets. This greatly extends the possibility to introduce hover engagement with Elementor.

Using hover effects is great for a variety of widgets, including: buttons, social media icons, headings and images.

You can add section and column hover by going to the Style tab of the panel. For widgets, the hover settings appear under the Advanced tab.

Hover transition

What’s so cool about this feature is that the hover effect occurs with a smooth and animated transition. For color hover, the colors doesn’t simply flip over, but instead transforms to the new color. You can even set the speed of the color transition.

The same transition effect is true regarding image position, box shadows and borders. Let’s go ahead and go over each of these hover effects, with some concrete examples to help you get started.

Images, videos and gradients background don’t have the same transition effect as color backgrounds. You can still produce a similar effect by setting a color background overlay on top of the background.

Actionable advice for creative uses of hover effects

Here are some ways Element Hover comes in handy in your daily routine as a web designer.

Improve Static Content

You can supercharge plain text pages that don’t feature images or videos by adding virtually any hover effect.

Emphasize CTA

Add focus to your call to action headlines with hover effects, in order to increase the chance visitors will notice them.

Boost Buttons

By using box shadow hover, you can lift your buttons off the ground, making it clearer for the visitor to click on them.

Enhance Feature Sections

Add interaction to your boring old features sections by adding color, border and shadow hover effects.

Conclusion

I hope this guide sheds some light on how to improve your website interaction design by using the new Element Hover feature. Like any feature, this can be overused, so I recommend you start experiment and see how to use it while not overloading the page with too many hover effects.

This feature is not only relevant to new projects. You can go over websites you previously designed with Elementor, and make them all the more engaging by quickly adding some subtle hover effects. In the future, we plan to expand the hover options and effects, as well as extend them to other widgets.

It takes some know how to figure out which areas can be improved with hover effects. I suggest that if you’re new to this interaction feature, test it out first, and also get inspiration from this guide and from other websites around the web. You can find tons of examples of hover effects. I’d love to get some of your feedback and hover design examples in the comments, so drop me a note.