{"id":3749,"date":"2017-07-05T12:52:36","date_gmt":"2017-07-05T12:52:36","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=3749"},"modified":"2017-07-05T12:52:36","modified_gmt":"2017-07-05T12:52:36","slug":"v150-hover-effect","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/v150-hover-effect\/","title":{"rendered":"Introducing Hover Effect: Boost Your Interaction Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3749\" class=\"elementor elementor-3749\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-qfck13o elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"qfck13o\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-nlwgvhe\" data-id=\"nlwgvhe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d19fc5e elementor-align-center elementor-mobile-align-justify elementor-widget elementor-widget-global elementor-global-16648 elementor-widget-button\" data-id=\"d19fc5e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.youtube.com\/c\/elementor?sub_confirmation=1\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-youtube\" aria-hidden=\"true\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Subscribe to Our YouTube Channel<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-kolz3em elementor-widget elementor-widget-text-editor\" data-id=\"kolz3em\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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\u00a0hover states. The hover state determines how different website elements react when being hovered over by the user&#8217;s cursor.<br \/><br \/>In our latest release, we&#8217;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&#8217;ve added, so you have an idea how to best incorporate them in your next project.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-p15c99y elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"p15c99y\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2lvss7f elementor-widget elementor-widget-heading\" data-id=\"2lvss7f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Types of Hover Effects<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vh4cyf9 elementor-widget elementor-widget-text-editor\" data-id=\"vh4cyf9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The hover effect variations we&#8217;ve added\u00a0include:<\/p><ul><li>Background color hover<\/li><li>Background gradient hover<\/li><li>Image and video hover<\/li><li>Color overlay hover<\/li><li>Box shadow hover<\/li><li>Border hover<\/li><\/ul><p>These six variations are available across sections, columns and most widgets.\u00a0<\/p><p>You may wonder what the impact hover effects have on site stickiness, bounce rate and possibly even conversion. We haven&#8217;t thoroughly checked this yet, but <a href=\"https:\/\/community.envato.com\/4-ecommerce-design-trends-that-will-make-your-conversion-rate-pop-in-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\">Envato did list<\/a> hover effects as one of 4 top design trends to boost conversion rates.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-v9yfltq elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"v9yfltq\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-yovo8v4 elementor-widget elementor-widget-heading\" data-id=\"yovo8v4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Hover Effects in Action<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-uissvqj elementor-widget elementor-widget-text-editor\" data-id=\"uissvqj\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let&#8217;s go over some of the effects that can be added to WordPress using Element Hover.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ewvppww elementor-alert-warning elementor-hidden-desktop elementor-widget elementor-widget-alert\" data-id=\"ewvppww\" data-element_type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\t\t\t<span class=\"elementor-alert-title\">Note:<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">Hover effect is best viewed on desktop.<\/span>\n\t\t\t\n\t\t\t\t\t\t<button type=\"button\" class=\"elementor-alert-dismiss\" aria-label=\"Dismiss this alert.\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&times;<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5do2utj elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-boxed elementor-section-height-default\" data-id=\"5do2utj\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-q2q06ug\" data-id=\"q2q06ug\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f85763 elementor-widget elementor-widget-heading\" data-id=\"1f85763\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Color Hover Effect<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3xrzl9r elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3xrzl9r\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3uy8hyq\" data-id=\"3uy8hyq\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1vd1i19 elementor-widget elementor-widget-heading\" data-id=\"1vd1i19\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Background color hover effects<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fm42ihx elementor-widget elementor-widget-text-editor\" data-id=\"fm42ihx\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.<\/p><p><strong>Instruction:<\/strong> Go to Section &gt; Style &gt; Background &gt; Hover, and set a color of <strong>#49a9e5<\/strong>, with transition duration of <strong>1.5<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-outeczq elementor-section-height-min-height elementor-hidden-phone elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"outeczq\" data-element_type=\"section\" data-settings=\"{&quot;shape_divider_bottom&quot;:&quot;tilt&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0,6V0h1000v100L0,6z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ognwmyr\" data-id=\"ognwmyr\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-khiuwjl elementor-section-content-middle elementor-section-height-min-height elementor-section-boxed elementor-section-height-default\" data-id=\"khiuwjl\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wider\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-wkonnhr\" data-id=\"wkonnhr\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ieguvwm elementor-widget elementor-widget-heading\" data-id=\"ieguvwm\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">01<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-qkbujvx elementor-widget elementor-widget-heading\" data-id=\"qkbujvx\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HOVER<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-sowfvgk\" data-id=\"sowfvgk\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-mydwbjm elementor-widget elementor-widget-heading\" data-id=\"mydwbjm\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">02<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-shthcgo elementor-widget elementor-widget-heading\" data-id=\"shthcgo\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">OVER<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-bstjeeo\" data-id=\"bstjeeo\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-zzcvefw elementor-widget elementor-widget-heading\" data-id=\"zzcvefw\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">03<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-xdleufq elementor-widget elementor-widget-heading\" data-id=\"xdleufq\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">US<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-na5ic6f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"na5ic6f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-gbh2pnp\" data-id=\"gbh2pnp\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dl4qw6b elementor-widget elementor-widget-heading\" data-id=\"dl4qw6b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Background column color hover<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-pi3ue21 elementor-widget elementor-widget-text-editor\" data-id=\"pi3ue21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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&#8217; attention\u00a0at a constant high.<\/p><p><strong>Instruction:<\/strong>\u00a0Go to Column &gt; Style &gt; Background &gt; Hover and set the color to\u00a0<strong>#f1c40f<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-rwowjyi elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"rwowjyi\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-tqkegze\" data-id=\"tqkegze\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bnqyazw elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"bnqyazw\" data-element_type=\"widget\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><img decoding=\"async\" width=\"120\" height=\"120\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=120,h=120\/blog\/wp-content\/uploads\/2017\/07\/i-02.png\" class=\"attachment-full size-full wp-image-3789\" alt=\"\" \/><\/figure><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Border Hovers<\/h3><p class=\"elementor-image-box-description\">Click edit button to change this text. Lorem ipsum dolor sit amet, <BR>consectetur elit. Ut elit tellus, luctus nec ullamcorper <\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-vnc9l4t elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"vnc9l4t\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-md0z2qg\" data-id=\"md0z2qg\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ru5glyi elementor-widget elementor-widget-heading\" data-id=\"ru5glyi\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Border hover effect<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-mmkcf5l elementor-widget elementor-widget-text-editor\" data-id=\"mmkcf5l\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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&#8217;s subtle, so it also fits minimalist styled websites.<\/p><p>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.<\/p><p><strong>Instruction:<\/strong>\u00a0Go to Column &gt; Style &gt; Border &gt; Hover and set a solid left border of 8 pixels<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-o3q0ijz elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-boxed elementor-section-height-default\" data-id=\"o3q0ijz\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-idrxc7h\" data-id=\"idrxc7h\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fnlxk9d elementor-widget elementor-widget-heading\" data-id=\"fnlxk9d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Overlay Color Hover<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0n8wons elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0n8wons\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cmg75ly\" data-id=\"cmg75ly\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5vqmux9 elementor-widget elementor-widget-heading\" data-id=\"5vqmux9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Background overlay hover effects\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-gu302dz elementor-widget elementor-widget-text-editor\" data-id=\"gu302dz\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.\u00a0<\/p><p><strong>Instruction:<\/strong> Go to Section &gt; Style &gt; Background Overlay &gt; Hover and set the color to\u00a0<strong>#3820a3<\/strong>, with opacity of\u00a0<strong>0.6<\/strong> and transition duration of <strong>1<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-skc02ko elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"skc02ko\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7asgmjk\" data-id=\"7asgmjk\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-uthug8j elementor-widget elementor-widget-image\" data-id=\"uthug8j\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/paris-r4q70lwj8plstn2top8bbxx1niq8r3jhz72ky8kh68.jpg\" title=\"paris\" alt=\"WordPress Hover Effects Color\" class=\"elementor-animation-grow\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-yamqm67 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"yamqm67\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9k9p8r6\" data-id=\"9k9p8r6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-helvu7t elementor-widget elementor-widget-heading\" data-id=\"helvu7t\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Box shadow hover effect<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-uusfca5 elementor-widget elementor-widget-text-editor\" data-id=\"uusfca5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By combining box shadows hover and grow animation hover, we&#8217;ve made the images appear as if they are elevated off the ground. I recommend you read this article in <a href=\"https:\/\/www.smashingmagazine.com\/2017\/02\/shadows-blur-effects-user-interface-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">SmashingMagazine<\/a>, explaining how box shadows can inform the visitor regarding the functional aspects of the design.<\/p><p><strong>Instruction:<\/strong>\u00a0Go to Image &gt; Advanced &gt;\u00a0Border &gt; Hover and set the color to <strong>#7F7E7F<\/strong>, with blur\u00a030, spread\u00a06 and vertical 20<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-knp7d62 elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-bottom elementor-section-boxed elementor-section-height-default\" data-id=\"knp7d62\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-tgmueoi\" data-id=\"tgmueoi\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ivlwmsj elementor-widget elementor-widget-heading\" data-id=\"ivlwmsj\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Generating Motion<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-vnjcj98 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"vnjcj98\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21ckacn\" data-id=\"21ckacn\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f38y03s elementor-widget elementor-widget-heading\" data-id=\"f38y03s\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Image position hover<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2mvg9rg elementor-widget elementor-widget-text-editor\" data-id=\"2mvg9rg\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.\u00a0<\/p><p><strong>Instruction:<\/strong> Go to Section &gt; Style &gt; Background &gt; Hover, set the same image for normal and hover, and\u00a0for hover set the position to Bottom-Center<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-v1lowmx elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-bottom elementor-section-boxed elementor-section-height-default\" data-id=\"v1lowmx\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-sf7pe9c\" data-id=\"sf7pe9c\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3kjqqx0 elementor-widget elementor-widget-heading\" data-id=\"3kjqqx0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\"><span style=\"color: #ffffff\">Creative<\/span><br>Combinations<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-hrnbgc8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"hrnbgc8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-okzwryi\" data-id=\"okzwryi\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bkg682u elementor-widget elementor-widget-heading\" data-id=\"bkg682u\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Before &amp; after image hover effect<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-500za7s elementor-widget elementor-widget-text-editor\" data-id=\"500za7s\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.<\/p><p><strong>Instruction:<\/strong> Go to Section &gt; Style &gt; Background, set the Normal image to be the black and white version, and the hover version to be the colorful version<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bpgxowh elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"bpgxowh\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-pyr7tg6 elementor-widget elementor-widget-heading\" data-id=\"pyr7tg6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How Element Hover Works<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2yw3ppm elementor-widget elementor-widget-text-editor\" data-id=\"2yw3ppm\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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 <a href=\"https:\/\/elementor.com\/blog\/v06-hover-animations\/\">hover animation<\/a>.<\/p><p>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.<\/p><p>Using hover effects is great for a variety of widgets, including: buttons, social media icons, headings and images.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-xie5lp9 elementor-widget elementor-widget-video\" data-id=\"xie5lp9\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/7ZFpmwYW8C0&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-et5dnn4 elementor-widget elementor-widget-heading\" data-id=\"et5dnn4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Hover transition\n\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lphyx9s elementor-widget elementor-widget-text-editor\" data-id=\"lphyx9s\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>What&#8217;s so cool about this feature is that the hover effect occurs with a smooth and animated transition. For color hover, the colors doesn&#8217;t simply flip over, but instead transforms to the new color. You can even set the speed of the color transition.<\/p><p>The same transition effect is true regarding image position, box shadows and borders. Let&#8217;s go ahead and go over each of these hover effects, with some concrete examples to help you get started.<\/p><p>Images, videos and gradients background don&#8217;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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-stlgzej elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"stlgzej\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-pmravnm\" data-id=\"pmravnm\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-rcbvsoe elementor-widget elementor-widget-heading\" data-id=\"rcbvsoe\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-large\">Actionable advice for creative uses of hover effects<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-opfegjq elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"opfegjq\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rypnr6j elementor-widget elementor-widget-text-editor\" data-id=\"rypnr6j\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here are some ways Element Hover comes in handy in your daily routine as a web designer.<\/p><p><strong>Improve Static Content<\/strong><\/p><p>You can supercharge plain text\u00a0pages that don&#8217;t feature images or videos by adding virtually\u00a0any hover effect.<\/p><p><strong>Emphasize CTA<\/strong><\/p><p>Add focus to your call to action headlines with hover effects, in order to increase the chance\u00a0visitors will notice them.<\/p><p><strong>Boost Buttons<\/strong><\/p><p>By using box shadow hover, you can lift your buttons off the ground, making it clearer for the visitor to click on them.<\/p><p><strong>Enhance Feature Sections<\/strong><\/p><p>Add interaction\u00a0to your boring old features sections by adding color, border and shadow hover effects.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-toqrxms elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"toqrxms\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21gsplb\" data-id=\"21gsplb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-okr9xov elementor-widget elementor-widget-heading\" data-id=\"okr9xov\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ei7vli3 elementor-widget elementor-widget-text-editor\" data-id=\"ei7vli3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b><\/b>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.<\/p><p>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.<\/p><p>It takes some know how to figure out which areas can be improved with hover effects. I suggest that if you&#8217;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&#8217;d love to get some of your feedback and hover design examples in the comments, so drop me a note.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting hover effects to every element of your WordPress site<\/p>\n","protected":false},"author":4,"featured_media":3815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-3749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-features","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add WordPress Hover Effect: Boost Your Design With Hover Effects<\/title>\n<meta name=\"description\" content=\"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add WordPress Hover Effect: Boost Your Design With Hover Effects\" \/>\n<meta property=\"og:description\" content=\"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-05T12:52:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/07\/element-hover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Introducing Hover Effect: Boost Your Interaction Design\",\"datePublished\":\"2017-07-05T12:52:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\"},\"wordCount\":1406,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\",\"url\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\",\"name\":\"Add WordPress Hover Effect: Boost Your Design With Hover Effects\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png\",\"datePublished\":\"2017-07-05T12:52:36+00:00\",\"description\":\"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/v150-hover-effect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png\",\"width\":1200,\"height\":628,\"caption\":\"hover effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/v150-hover-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Hover Effect: Boost Your Interaction Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add WordPress Hover Effect: Boost Your Design With Hover Effects","description":"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/v150-hover-effect\/","og_locale":"en_US","og_type":"article","og_title":"Add WordPress Hover Effect: Boost Your Design With Hover Effects","og_description":"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.","og_url":"https:\/\/elementor.com\/blog\/v150-hover-effect\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-07-05T12:52:36+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/07\/element-hover.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Introducing Hover Effect: Boost Your Interaction Design","datePublished":"2017-07-05T12:52:36+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/"},"wordCount":1406,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png","keywords":["Build","Video"],"articleSection":["New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/v150-hover-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/","url":"https:\/\/elementor.com\/blog\/v150-hover-effect\/","name":"Add WordPress Hover Effect: Boost Your Design With Hover Effects","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png","datePublished":"2017-07-05T12:52:36+00:00","description":"In our latest release, we\u2019ve introduced Element Hover, a feature which lets you add interesting WordPress hover effects to your site.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/v150-hover-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/07\/element-hover.png","width":1200,"height":628,"caption":"hover effects"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/v150-hover-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Introducing Hover Effect: Boost Your Interaction Design"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/3749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=3749"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/3749\/revisions"}],"predecessor-version":[{"id":91544,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/3749\/revisions\/91544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/3815"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=3749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=3749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=3749"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=3749"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=3749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}