---
title: "How to Use the Image Content With the Hover Card in WordPress?"
url: https://nexterwp.com/docs/use-the-image-content-with-the-hover-card-in-wordpress/
date: 2024-12-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "If you want to add images to your custom layout, you can use the Image content option in the Hover Card block from Nexter Blocks. This feature lets you enhance..."
image: https://nexterwp.com/wp-content/uploads/2024/12/use-the-image-content-with-the-hover-card-in-wordpress-1024x519.jpg
word_count: 231
---

# How to Use the Image Content With the Hover Card in WordPress?

## Key Takeaways

- Nexter Blocks includes the Hover Card block, which allows users to enhance hover cards with images for improved visual appeal.
- The Image content option in the Hover Card block provides additional style settings, including image width, border, and box-shadow adjustments.
- Users can set the Open Tag to None in the Hover Card block if they prefer not to wrap content inside another tag.

If you want to add images to your custom layout, you can use the Image content option in the Hover Card block from Nexter Blocks. This feature lets you enhance the visual appeal of your hover cards by adding captivating images, making your website more engaging and attractive to visitors.

*To check the complete feature overview documentation of the Nexter Blocks Hover Card block,* *[click here](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/hover-card-animations-wordpress/)

To use Image content in the Hover Card block, add the block on the page and follow the steps - 

1. Open a repeater item and 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.

2. Then select the appropriate tag in the **Close **tab.

3. Then, from the **Content** section, select **Image**. 

4. After that, in the **Upload Image **section, you have to add your image.

Apart from the normal style and background style, you’ll find additional image style options. You can set the image width and max width, you can also manage the border, border radius, box-shadow and opacity for both normal and hover state.

## Frequently Asked Questions

**Q: What should I do if the image doesn't upload in the Hover Card block?**
A: If the image fails to upload in the Hover Card block, ensure that the Nexter Blocks plugin is properly installed and activated. Sometimes, browser issues or file size limits can prevent uploads. Check that your image file is within the acceptable size limits and try using a different browser if problems persist.

**Q: What image styles can I apply in the Hover Card block?**
A: In the Hover Card block, you can customize various image styles, including width, max width, border, border radius, box-shadow, and opacity for both normal and hover states. These options allow you to create a visually appealing effect that enhances user interaction.

**Q: What happens if I set the Open Tag to None in the Hover Card block?**
A: Setting the Open Tag to None means that the content won't be wrapped inside another tag. This can be useful for maintaining a clean HTML structure, especially if you want to avoid additional markup that could interfere with styling or functionality.

**Q: Are there any limitations when using images in the Hover Card block?**
A: While using images in the Hover Card block, be aware that the block is designed for single images rather than complex layouts. Additionally, ensure that the images are optimized for web use to prevent slow loading times, which can negatively impact user experience.

**Q: What are the best practices for using images in the Hover Card block?**
A: For optimal results, use high-quality images that are appropriately sized for web display. Consider the aspect ratio and ensure that the images align with your site's overall design. Utilizing the additional image style options can also enhance the hover effect, making your site more engaging.