Caption Hover Effects

Caption hover effects are all about displaying text beautifully over your images. With 31 layouts available, this effect type gives you an impressive variety of ways to reveal titles, descriptions, and other content when a visitor hovers over an image, from simple fades to dramatic blinds and directional slides.

What Makes Caption Effects Special?

While General effects show a full overlay, Caption effects are specifically designed to highlight the text content itself. The animations are more text-focused, the caption slides in, sweeps across, or unfolds over the image in a way that draws the eye to your message.

Caption Animation Styles

The 31 Caption layouts include several distinct animation families:

Directional Slides

Text slides in from a specific direction on hover:

• Slide Up: Caption rises from the bottom
• Slide Down: Caption drops from the top
• Slide Left: Caption enters from the right
• Slide Right: Caption enters from the left

Blinds Effects

The image or overlay opens like window blinds to reveal the caption:

• Horizontal Blinds: Strips open left to right
• Vertical Blinds: Strips open top to bottom

Fade Reveals

Caption fades in gently over the image, minimal and elegant.

Full Overlay with Animated Text

A color overlay appears and the text animates in separately, great for dramatic emphasis.

Common Use Cases

• Photography portfolios: Show photo titles and categories elegantly
• Real estate listings: Display property names and prices on hover
• Food & restaurant sites: Show dish names and descriptions over food photos
• News & magazine sites: Display article headlines over featured images
• Product galleries: Show product name and a short tagline

Setting Up Caption Hover Effects

1. Open Image Hover Ultimate in the WordPress admin.
2. Click Add New and select Caption as the effect type.
3. Choose one of the 31 layouts.
4. Add your images with titles and descriptions.
5. Customize the typography (font family, size, color, weight).
6. Set the background overlay color and opacity.
7. Save and use the generated shortcode.

Customization Options

Typography

• Heading font family, size, color, weight
• Description font family, size, color, line height
• 650+ Google Fonts available (Pro)

Background & Overlay

• Overlay color (solid or gradient)
• Overlay opacity
• Caption background color (shown behind text only)

Animation Timing

• Transition speed (fast, medium, slow)
• CSS animation duration in milliseconds

Layout

• Image columns (1–6)
• Image border radius
• Spacing between images

Pro Tips

• 🎭 Blinds effects look best on photography and lifestyle images. Avoid them on product images with text or logos.
• 📝 Shorter titles work better with directional slide effects, as the animation draws attention to the text. Make it punchy.
• 🌓 Semi-transparent overlays (40–60% opacity) let the image show through while still making text readable.
• 🎨 White text on dark overlay is the most readable combination for caption effects.

Common Mistakes to Avoid

• ❌ Using blinds on images with important edges: the blinds effect can clip the edges of your image during animation.
• ❌ Too much text: Caption effects are built for short text. Keep descriptions under 20 words.
• ❌ Matching text and overlay colors: Always ensure contrast between your caption text and overlay background.