{"id":3110,"date":"2021-06-23T09:00:25","date_gmt":"2021-06-23T09:00:25","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3110"},"modified":"2023-02-21T10:41:52","modified_gmt":"2023-02-21T10:41:52","slug":"how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/","title":{"rendered":"How to Add Hover Animations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3110\" class=\"elementor elementor-3110\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8d404cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d404cd\" 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-793218e5\" data-id=\"793218e5\" 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-7f5ccaa5 elementor-widget elementor-widget-video\" data-id=\"7f5ccaa5\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=pOKn-GL4pN8&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-67048f66 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"67048f66\" 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-2b79dd5d\" data-id=\"2b79dd5d\" 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-524365ac elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"524365ac\" 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-1381\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1381\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1382\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1382\" 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-1381\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1381\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1381\" tabindex=\"0\" hidden=\"false\"><p>In this video I will show you how to add Hover Animations to Image, Buttons and Icons, by using the Elementor page builder for WordPress. With this featue you can add beautiful hover animations with absolutely no coding or designing skills.<\/p><\/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-1382\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1382\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1382\" tabindex=\"0\" hidden=\"hidden\"><p>Hale mentors this is Noah from Elementor<br \/>today I&#8217;ll show you the Homer animation<br \/>feature with which you can make your<br \/>images icons and buttons animated and<br \/>interactive here in this page you could<br \/>see that we&#8217;ve said in animation for the<br \/>Homer of images and for buttons and<br \/>icons and for image boxes which are<br \/>actually the image widget now to begin<br \/>we&#8217;ll just click on the edit with Ella<br \/>matter button alright to set a Homer<br \/>animation for this image you can just<br \/>click on the image on the style tab and<br \/>here you can see the Homer animation<br \/>option in this list you could choose<br \/>from 26 different animations for your<br \/>widget let&#8217;s try pulls or bounce in<br \/>wobble top etc now let&#8217;s move on to the<br \/>buttons to set a Homer animation for a<br \/>button you just click on the button just<br \/>like for the image but the difference<br \/>here is that you click on the style and<br \/>then on the button hover and there you<br \/>will see the animation option here you<br \/>can also choose from 26 different<br \/>animations alright and now we&#8217;ll go to<br \/>the icons the icons are the same as for<br \/>the button where you choose the style<br \/>tab and then icon hover and there you<br \/>could see the animation option okay this<br \/>was the hover animation feature for<br \/>images buttons and icons I hope you<br \/>enjoyed this video<br \/>more videos and tutorials subscribe our<br \/>YouTube channel or visit us at comment<br \/>or com<\/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 video I will show you how to add Hover Animations to Image, Buttons and Icons, by using the Elementor page builder for WordPress. With this featue you can add beautiful hover animations with absolutely no coding or designing skills. Transcript Hale mentors this is Noah from Elementor today I\u2019ll show [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3966,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3110","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 Animations - 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-animations-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\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 Animations - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this video I will show you how to add Hover Animations to Image, Buttons and Icons, by using the Elementor page builder for WordPress. With this featue you can add beautiful hover animations with absolutely no coding or designing skills. Transcript Hale mentors this is Noah from Elementor today I\u2019ll show [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T09:00:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:41:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.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=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Hover Animations - 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-animations-to-your-wordpress-website-using-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Hover Animations - Academy","og_description":"Overview Transcript Overview In this video I will show you how to add Hover Animations to Image, Buttons and Icons, by using the Elementor page builder for WordPress. With this featue you can add beautiful hover animations with absolutely no coding or designing skills. Transcript Hale mentors this is Noah from Elementor today I\u2019ll show [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/","og_site_name":"Academy","article_published_time":"2021-06-23T09:00:25+00:00","article_modified_time":"2023-02-21T10:41:52+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Add Hover Animations","datePublished":"2021-06-23T09:00:25+00:00","dateModified":"2023-02-21T10:41:52+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/"},"wordCount":314,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/","url":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/","name":"How to Add Hover Animations - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.jpg","datePublished":"2021-06-23T09:00:25+00:00","dateModified":"2023-02-21T10:41:52+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Add-Hover-Animations.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-add-hover-animations-to-your-wordpress-website-using-elementor-page-builder\/#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 Animations"}]},{"@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\/3110","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=3110"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3110\/revisions"}],"predecessor-version":[{"id":9379,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3110\/revisions\/9379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3966"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}