{"id":121101,"date":"2023-07-04T18:25:01","date_gmt":"2023-07-04T12:55:01","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=121101"},"modified":"2023-07-05T09:16:47","modified_gmt":"2023-07-05T03:46:47","slug":"add-hover-effect-with-custom-hover-class-in-elementor-hover-card","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-hover-effect-with-custom-hover-class-in-elementor-hover-card\/","title":{"rendered":"How to Add Hover Effect With Custom Hover Class in Elementor Hover Card?"},"content":{"rendered":"\n

With the Hover Card widget from The Plus Addons for Elementor, you can easily trigger a hover effect by adding a parent container class name. By assigning a specific class to the element, you can add custom styling and animations for the hover state, creating a visually appealing effect that enhances user interactivity.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

You can find the Custom Hover option in Background Style as well as in Text and Image content type separately, but the process works similarly for all.<\/p>\n\n\n\n

Here we\u2019ll use the Custom Hover option from Background Style.<\/p>\n\n\n\n

For example, we have an anchor tag button inside a container class called \u201ccard<\/em>\u201d. <\/p>\n\n\n\n

Now we want to add a scale effect to the button when someone hovers over the \u201ccard<\/em>\u201d container.<\/p>\n\n\n\n

So in the Hover Card widget, we have an item with Div<\/strong> as the Open Tag<\/strong> and card<\/strong> as the class name, since we want to add an anchor tag inside the div, we\u2019ll set None<\/strong> as the Close Tag<\/strong>. We\u2019ll select None<\/strong> in the Content<\/strong> because this div is just a container. <\/p>\n\n\n\n

Then, in the second item, we\u2019ll select a<\/strong> as the Open Tag<\/strong> and Default<\/strong> as the Close Tag<\/strong>. In the Content,<\/strong> we\u2019ll select Text<\/strong> and add text for the button.<\/p>\n\n\n\n

In the third item, we\u2019ll set None<\/strong> as the Open Tag<\/strong> and Div <\/strong>as the Close Tag<\/strong> since we want to close the card<\/strong> container here.<\/p>\n\n\n\n

Set None<\/strong> in the Content<\/strong> dropdown as well.<\/p>\n\n\n\n

\"hover<\/figure>\n\n\n\n
\n

Note: Make sure to style the elements from the <\/em>Style<\/em><\/strong> and <\/em>Background Style<\/em><\/strong> section according to your need.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Now open the second item and turn on the Background<\/strong> toggle under the Background Style<\/strong> section. <\/p>\n\n\n\n

Go to the Hover<\/strong> tab and turn on the Custom Hover<\/strong> toggle. In the Enter Class<\/strong> field, add the parent container class name you want to target, for instance, we\u2019ll add \u201c.card<\/em>\u201d here.<\/p>\n\n\n\n

\n

Note: Make sure to add the class name with <\/em>.(dot)<\/em><\/strong> in front.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Now to add the scale effect, go to the Transform css<\/strong> field and add the transform CSS. For instance, we\u2019ll add scale(1.1)<\/em>. <\/p>\n\n\n\n

\"hover<\/figure>\n\n\n\n

Now if you hover over the card container, the button will grow.<\/p>\n\n\n\n

Also, read How to Create a Custom Layout With the Hover Card in Elementor<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":121104,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[574,527],"class_list":["post-121101","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-hover-card","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=121101"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121104"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121101"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}