{"id":121085,"date":"2023-07-04T18:08:42","date_gmt":"2023-07-04T12:38:42","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=121085"},"modified":"2023-07-05T09:17:41","modified_gmt":"2023-07-05T03:47:41","slug":"use-image-content-with-hover-card-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/use-image-content-with-hover-card-in-elementor\/","title":{"rendered":"How to Use the Image Content With the Hover Card in Elementor?"},"content":{"rendered":"\n

If you want to add image content in your custom layout, you can do that with the Image content type option of the Hover Card widget of The Plus Addons for Elementor. Enhance the visual appeal of your hover cards by adding captivating images, making your website more engaging and visually appealing. <\/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

To use Image content in the Hover Card widget, add the widget on the page and click the +ADD ITEM<\/strong> button to add an item.<\/p>\n\n\n\n

Select the appropriate tag in the Open<\/strong> tab. <\/p>\n\n\n\n

\n

Note: If you don\u2019t want to wrap the content inside another tag you can set the <\/em>Open Tag<\/em><\/strong> to <\/em>None<\/em><\/strong>.<\/em><\/p>\n<\/blockquote>\n\n\n\n

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

If you want, you can add a class name in the Enter Class<\/strong> field.<\/p>\n\n\n\n

Then select the appropriate tag in the Close <\/strong>tab. <\/p>\n\n\n\n

From the Content<\/strong> dropdown, select Image<\/strong>, then from the Image As<\/strong> dropdown, you can use the image normally or as a background.<\/p>\n\n\n\n

\n

Note: If you use the image as background, make sure to add some content inside the element to see the background image.<\/em><\/p>\n<\/blockquote>\n\n\n\n

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

In the Media<\/strong> field,<\/strong> you can add your image.<\/p>\n\n\n\n

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

Apart from setting style from Style<\/strong> and Background Style<\/strong> sections, you can manage the image style from the Image Style<\/strong> section. You can set the image width and max width, you can also manage the border, border radius, box-shadow, opacity and CSS filter for both normal and hover state.<\/p>\n\n\n\n

You can also use the Custom Hover<\/strong> option to add a hover effect by adding a parent container class name. It works similarly to the Background style custom hover option. Learn the process<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":121087,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[574,527],"class_list":["post-121085","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\/121085","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=121085"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121087"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121085"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}