{"id":2881,"date":"2021-06-23T06:33:47","date_gmt":"2021-06-23T06:33:47","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2881"},"modified":"2023-02-21T10:57:18","modified_gmt":"2023-02-21T10:57:18","slug":"how-to-add-hover-effects-to-wordpress-using-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/","title":{"rendered":"How to Add Hover Effects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2881\" class=\"elementor elementor-2881\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4e23a2a1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4e23a2a1\" 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-6767a95d\" data-id=\"6767a95d\" 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-13e1896d elementor-widget elementor-widget-video\" data-id=\"13e1896d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=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\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-328f2dc4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"328f2dc4\" 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-748ca336\" data-id=\"748ca336\" 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-13b32c88 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"13b32c88\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3301\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3301\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3302\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3302\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3301\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3301\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3301\" tabindex=\"0\" hidden=\"false\"><div id=\"meta\" class=\"style-scope ytd-watch-flexy\"><div id=\"meta-contents\" class=\"style-scope ytd-watch-flexy\"><div id=\"container\" class=\"style-scope ytd-video-secondary-info-renderer\"><div id=\"content\" class=\"style-scope ytd-expander\"><div id=\"description\" class=\"style-scope ytd-video-secondary-info-renderer\">In this tutorial we show how to add hover effects to WordPress using Elementor&#8217;s hover feature. With this feature, you can add hover effects for color, gradient, image and video background. You can also add border and box shadow hover effects. This is a feature that is available both on the free and Pro versions of Elementor.<\/div><\/div><\/div><\/div><\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3302\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3302\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3302\" tabindex=\"0\" hidden=\"hidden\"><p>Hi there, today I&#8217;m going to show you how<br \/>to add beautiful hover effects to your<br \/>WordPress websites, using the free<br \/>Elementor hover feature. This is a really<br \/>cool feature that can increase and<br \/>improve your engagement and design<br \/>interaction. I&#8217;m going to show you, step<br \/>by step, how I created each of these<br \/>sections. So let&#8217;s go into Elementor and<br \/>see how it is done. So for the first<br \/>section, I want to add a color transition<br \/>so I&#8217;ll go to: section &gt; style and under<br \/>hover, I can choose whatever color I want.<br \/>I&#8217;m going to choose this lighter blue.<br \/>This way when I hover over it you can<br \/>see the color transition from<br \/>the dark blue to the lighter blue. I can<br \/>also set the transition duration this<br \/>way, making the whole transition longer.<br \/>Next, we have an image hover effect. What<br \/>I want to do is turn this black and<br \/>white image into a colorful image. To do<br \/>so, again I go to section &gt; style. In the<br \/>normal state I have this black and white<br \/>image. In the hover state I have the<br \/>colorful image of the lion. Now when<br \/>I hover over it, you see the beautiful<br \/>transition from black &amp; white to color.<br \/>Next, we have another image effect. So<br \/>here what we&#8217;re doing is using the same<br \/>image on normal and hover.<br \/>We set the position to top right and on<br \/>hover we set it to bottom right. This way<br \/>when I hover over it you see the cool<br \/>transition of position that we get neck<br \/>I&#8217;m going to show you the overlay hover<br \/>effect so as we&#8217;ve seen when you set<br \/>color transition you get a nice<br \/>transition from one color to the other<br \/>in image we don&#8217;t get this effect but to<br \/>bypass it what I can do is add a<br \/>background overlay effect so on hover<br \/>I&#8217;ll set this purple color with opacity<br \/>of 0.6 this way when I hover over it you<br \/>see how the headline pops out and looks<br \/>much more impressive here we can see the<br \/>border effect now how this is done is on<br \/>the widget level so I go to my image box<br \/>I go to advanced and under border on<br \/>hover I have the border type of solid 8<br \/>pixel and I&#8217;m going to choose this<br \/>turquoise color this way when I hover<br \/>over it I see this nice effect this nice<br \/>focus this can really pop out your<br \/>feature sections and be really good for<br \/>your entire design interaction next we<br \/>have this nice poster effect this<br \/>combines two different effects both<br \/>available on the free version of<br \/>Elementor so if I go to the image I will<br \/>first use the hover animation of row to<br \/>pop out the image and then I can add<br \/>under advanced border hover I can add a<br \/>box shadow of a darker color this way<br \/>when I hover over it you see the Box<br \/>shadow thickens and I get the sort of<br \/>pop out effect that really lifts the<br \/>whole image off the screen all these the<br \/>amazing hover effects are available on<br \/>the section level on the column level<br \/>and on the widget level so here we see<br \/>it done on the column level we set again<br \/>column style hover choose this bold<br \/>yellow yellow color to set a really nice<br \/>and<br \/>a real nice contrast to focus on those<br \/>boxes finally I want to show you this<br \/>effect on the widget level so I have<br \/>here a price list and again under<br \/>advanced background I&#8217;m going to add a<br \/>hover color of white this way when we<br \/>hover over the elements they will get a<br \/>nice focus I hope you&#8217;ve seen that this<br \/>is a really cool feature that we&#8217;ve<br \/>added to the free version of Elementor I<br \/>invite you to explore it and try it out<br \/>on your own and there&#8217;s really endless<br \/>possibilities you can reach with this<br \/>effect so tell me what you think in the<br \/>comments below and also please subscribe<br \/>to this channel so you can get this kind<br \/>of amazing updates that we keep bringing<br \/>to our page builder until next time this<br \/>is Ben from Elementor.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we show how to add hover effects to WordPress using Elementor\u2019s hover feature. With this feature, you can add hover effects for color, gradient, image and video background. You can also add border and box shadow hover effects. This is a feature that is available both on the free [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3958,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Hover Effects - Academy<\/title>\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\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Hover Effects - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we show how to add hover effects to WordPress using Elementor\u2019s hover feature. With this feature, you can add hover effects for color, gradient, image and video background. You can also add border and box shadow hover effects. This is a feature that is available both on the free [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T06:33:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:57:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Hover Effects - Academy","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\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Hover Effects - Academy","og_description":"Overview Transcript Overview In this tutorial we show how to add hover effects to WordPress using Elementor\u2019s hover feature. With this feature, you can add hover effects for color, gradient, image and video background. You can also add border and box shadow hover effects. This is a feature that is available both on the free [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T06:33:47+00:00","article_modified_time":"2023-02-21T10:57:18+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add Hover Effects","datePublished":"2021-06-23T06:33:47+00:00","dateModified":"2023-02-21T10:57:18+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/"},"wordCount":797,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/","name":"How to Add Hover Effects - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg","datePublished":"2021-06-23T06:33:47+00:00","dateModified":"2023-02-21T10:57:18+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Effects-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-effects-to-wordpress-using-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Add Hover Effects"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2881"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2881\/revisions"}],"predecessor-version":[{"id":9414,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2881\/revisions\/9414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3958"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}