The Interactive Image Card block is a free Gutenberg block that lets you create dynamic, visually appealing cards with hover effects and clickable elements perfect for showcasing images, products, or key content with engaging interactivity.

Adding the block

To add the block:

1. Click the “+” button to add a new block.
2. Search for “Interactive Image Card” and select it.
3. For more details refer to this article.

Content settings

Title

Enter the main heading or title for the image card.

Content

Add supporting text or description that appears with the card. This can give users more information about the image, service, or feature being highlighted.

Image

Upload or select an image from the media library. This image will be the background or main visual of the card.

Design customization options

Layout

• Choose from 10 layout options to display your content beautifully.

Layout settings

Image Opacity: Adjust the transparency of images.

Color: Set custom colors for your layout.

Title settings

• Heading Level: Choose heading tag (H1, H2, H3, etc.) for the title.
• Color: Customize the title color.
• Typography: Control font family, size, weight, and style for the title.

Content settings

• Color: Set the content text color.
• Alignment: Choose content alignment (left, center, right).
• Typography: Adjust font style, size, and weight for the content.