How to Use the Image Content With the Hover Card in Elementor?

Key Takeaways

  • The Plus Addons for Elementor allows users to enhance hover cards by adding captivating images using the Image content type option.
  • Users can manage image styles, including width, max width, border, border radius, box-shadow, opacity, and CSS filter for both normal and hover states.
  • The Hover Card widget requires installation and activation of The Plus Addons for Elementor to access its features.
Table Of Content

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. 

To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To use Image content in the Hover Card widget, add the widget on the page and click the +ADD ITEM button to add an item.

Select the appropriate tag in the Open tab.

Note: If you don’t want to wrap the content inside another tag you can set the Open Tag to None.

If you want, you can add a class name in the Enter Class field.

Then select the appropriate tag in the Close tab. 

From the Content dropdown, select Image, then from the Image As dropdown, you can use the image normally or as a background.

Note: If you use the image as background, make sure to add some content inside the element to see the background image.

In the Media field, you can add your image.

Hover card image content type

Apart from setting style from Style and Background Style sections, you can manage the image style from the Image Style 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.

You can also use the Custom Hover 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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the image content isn't displaying in the Hover Card?

If the image content isn't showing up, ensure that you've selected 'Image' from the Content dropdown in the Hover Card widget settings. Additionally, if you're using the image as a background, remember to add some content inside the element to make the background image visible. This is a common oversight that can lead to confusion.

Are there any limitations when using images in the Hover Card widget?

One limitation to be aware of is that if you use an image as a background, you must include some content inside the element for the background image to be visible. This requirement can lead to unexpected results if overlooked, so it's essential to plan your layout accordingly.

How can I add hover effects to the images in the Hover Card?

To add hover effects to images in the Hover Card, use the Custom Hover option by entering a parent container class name. This allows you to create unique hover effects that enhance user interaction. It's a powerful feature that can make your design stand out, so experiment with different effects to see what works best for your site.

Last reviewed: April 11, 2026