--- title: "How to Use the Image Content With the Hover Card in Elementor?" url: https://theplusaddons.com/docs/use-image-content-with-hover-card-in-elementor/ date: 2023-07-04 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "Image rows add product photos, icons and background pictures to a layout built with the Hover Card widget. With the Image content type of the Hover Card widget in The..." image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Use-the-Image-Content-With-the-Hover-Card-in-Elementor_-1024x536.jpg word_count: 601 --- # How to Use the Image Content With the Hover Card in Elementor? ## - Utilizes the Image content type option in the Hover Card widget of The Plus Addons for Elementor to enhance visual appeal. - Enables users to add images as normal or background through the Content dropdown and Media field in the Hover Card settings. - Allows customization of image style, including width, border, box-shadow, and hover effects using the Custom Hover option. Image rows add product photos, icons and background pictures to a layout built with the Hover Card widget. With the **Image** content type of the **Hover Card** widget in The Plus Addons for Elementor, a row shows an image as a normal image or as the background of the tag it opens. *To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, [click here](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hover-card/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Free** — Hover Card is part of the free The Plus Addons for Elementor plugin. It works the same with the Pro plugin installed.- **Widget to enable:** Hover Card, switched on under **The Plus Addons > Widgets**.- **Deprecated:** the editor shows “The Hover Card widget has been deprecated since The Plus Addons for Elementor 6.5.0. Note that Hover Card will be completely removed once The Plus Addons for Elementor 6.6.0 is released.” No replacement widget is named, so avoid it for new pages.- **Skills:** you build the HTML structure yourself, row by row, so basic HTML and CSS knowledge helps. ## How to Add an Image - Add the **Hover Card** widget and click **+ Add Item** in **Content > Hover Card**.- On the **Open** tab, set **Open Tag** to **Div** and leave **Close Tag** on **Default**. The div is the box the Image Style settings style.- Set **Content** to **Image**, leave **Image As** on **Default** and pick the picture in **Media**. ![A Hover Card row with Content set to Image and a picture selected in the Media field](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-content-image.webp) Adding an image row, in motion: ![Adding an Image row to the Hover Card widget](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-image-content-type.gif) - Under **Style**, set **Display** to **Block**. Then set the size in **Image Style > Width** or **Max. Width**. ![Image Style settings with the Width slider and the Normal and Hover tabs](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-image-style.webp) ## How to Use the Image as a Background - Set **Image As** to **Background**.- Under **Style**, set **Display** to **Block**, switch on **Width/Height Options** and give the box a **Height**. Without a height the box has no size, and nothing shows.- To place text over the picture, set **Close Tag** to **None**, add the text rows after it, and close the box with a row whose **Open Tag** is None and **Close Tag** is Div. ![Image As set to Background, with the picture filling a 420 by 260 pixel box on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-image-as.webp) ![A background image filling a fixed-size box built with the Hover Card widget](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-image-background.webp) ## How It Behaves - The Image Style settings (Width, Max. Width, Border, Border Radius, Box Shadow, Opacity, CSS Filters) style the tag around the image. The image shrinks to fit a narrower box.- Border Radius rounds the box, not the picture. Set **Overflow** to **Hidden** on the row to clip the image to the rounded corners.- A background image covers the whole box and stays behind the rows placed inside it.- The Hover tab applies while the pointer is over the image's box. For example, a grayscale CSS Filter set under Image Style > Hover > Custom Hover, shown while the pointer is over the card (it reacts to the pointer anywhere in the widget, see Limitations): ![Product card with a colour image before hovering](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-image-hover.webp) ![The same card while hovering, with the image turned grayscale](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-image-hover-hover.webp) ## Limitations - With **Display** left on Initial, Width, Max. Width and background images have no visible effect.- With **Open Tag** None there is no box, so the Image Style settings do nothing.- Images get no alt text, which screen readers need.- The **Custom Hover** switch on the Image Style Hover tab ignores its **Enter Class**: hovering anywhere inside the widget triggers the effect.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released. ## Troubleshooting ### The background image does not show Set **Display** to **Block** and give the box a **Height**, or add text rows inside it. ### Width has no effect Give the row an Open Tag such as Div and set **Display** to **Block**. ## Related Docs - [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Add multiple elements inside one element](https://theplusaddons.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [Add a hover effect with a Custom Hover class](https://theplusaddons.com/docs/add-hover-effect-with-custom-hover-class-in-elementor-hover-card/)