Introducing Hover Effect: Boost Your Interaction Design

In our latest release, we've introduced Element Hover, a feature which lets you add free WordPress hover effects to your site easily and visually, without coding any CSS.

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

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.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

69 Responses

  1. Very cool! Is there a pre-load function? Some of the larger images used for hover can cause a “blink” as the second image gets called – seems like this is happening on the lion example.

  2. I redesigned my site in Divi a few months ago before discovering Elementor Pro. I’ve been using Elementor ever since! I now want to swap it over because you guys have created the easiest to use WP page layout plug there is. All these upgrades too, brilliant. Thank you.

  3. Thank you VERY much — I was looking for this feature — wow — outstanding work — it will enhance my website designs for clients — you just keep making my business look more and more professional. I have 20 OTHER website design programs and will be hitting the DELETE button real soon!

  4. Elei is going to be the best wp design tool everwe have a lot of fun with my son and I when we design a site and their is not a tool to do somthing my son spend a few hours working with css and the next day you come out with the right tool for the job “Carry On Elementor” you are the best.

  5. Love this! Absolutely beautiful feature, but, except for the drop shadow effect (which doesn’t return to normal when touched), it doesn’t work on my iPhone. Not sure if this was on purpose, but thinking not because the dropshadow effect is trying to function.

  6. Fantastic. Thank you for providing such a fantastic product. I am making some beautiful website designs with Elementor Pro. Really pleased that I bought into this product. 🙂

  7. …the more improvements you all make with your amazing page builder the more i continue to make it the one and only page builder i use and recommend…! definitely a 100% “wow!” factor on this latest addition… you guys rock…!

  8. This is awesome!
    I’m not too deep into coding and this really is a gamechanger for my whole design because I don’t have to use any workarounds anymore… this truly IS a relief.

  9. Excellent style option! Can’t wait to play around with it.

    I’d like to have the images in a post widget to appear black & white when static but become color upon hover. Would that be possible? At the moment, it seems the only element to which I can add a hover effect would be the entire background.

    Thanks!

  10. Hey Ben,

    Elementor is becoming one of the best page builders on the market. Lot of features and really simple to use. Are you planning to add opt-in forms? Also, what plugin are you using to collect email after this and other posts? I really like the form?

  11. Love it. Used to have to use custom css but now many hover effects can be achieved in Elementor.
    Thank you!

  12. Glad you finally released this article, I was waiting to read the whole new hover effect on elementor. In fact…I even surprised to know that this has implemented already on the previous version, but somehow I missed it. Thanks a lot Ben.

  13. I was a very faithful Visual Composer user.. then I fooled my brain into being a little experimental.. then I got an Elementor Pro license.

    One thing I’d like a lot is being able to place the toolbar on the right edge of my window. I’m sure there are all sorts of improvements that can be made, but overall Elementor kicks ass for loads of reasons.

  14. Hey Ben, my hover is not fading in on transition -its just switching to the overlay color. BTW is there a live preview of the pro features like slides? I would like to see them in action. Also I see the carousel is on its way, any other elements in the pro pipeline? Thanks and great work on this release

  15. Ben,

    Being a Divi / X user – I am very impressed by what is on offer here. Any roadmap for features etc for the Pro version?

  16. Hey guys,
    I start using Elementor Pro and I love it but having problem working and using slides and countdown. After I customized page been saved when trying to see in actual page everything looks fine accept slides and countdown doesn’t shows on the page. Any idea?

    1. Could be a conflict with another plugin. Try to deactivate all plugins and switch to theme TwentySixteen see if this helps. If not, contact our support.

  17. Absolutely stunning addition to create more interactive websites! Bravo Elementor!

    Now, if only Elementor worked well with Post Sliders or had its own slider for POSTS.

  18. I think you explain me wrong. What I want is to put a link to an entire column. It’s possible? How is it done?

  19. A little bit misleading Ben. Where on hover effects have been used on images, the effect can only be applied to the ‘section’ not the image. Fine if your image covers the section, as in the case of the lion image, but most do not

  20. I need the same. How can I link the entire column, so I can use a background image and overlay and it can serve as a button. Have you found out how to do?

  21. Hello Ben, when I hover ob my button I get an underline under under my text. Do you know how to change this?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.