Button Overlay Hover Effects

Button overlay effects are perfect when you want to turn an image into a multi-action interface. Instead of just showing text on hover, this effect type reveals one or more icon buttons over the image — each with its own action or link. With 11 layouts to choose from, it’s a great solution for portfolios, WooCommerce galleries, and social sharing setups.

What Are Button Overlay Effects?

When a visitor hovers over an image, one or more styled icon buttons appear on top of it. Each button can have:

• A custom icon (from Font Awesome)
• A unique URL or action
• Individual color and hover styling

This is particularly useful when an image can lead to multiple destinations, for example, a “View” button and a “Buy Now” button on a product image.

Available Layouts

The Button effect type includes 11 layout variations. They differ in:

• Number of buttons shown (1, 2, or 3)
• Button arrangement (horizontal row, vertical stack, diagonal)
• How buttons animate in (fade, slide, scale)
• Button style (circle, square, pill-shaped)

Common Use Cases

• Portfolio galleries: “View Project” and “Visit Website” buttons on each portfolio item
• WooCommerce product galleries: “Add to Cart” and “Quick View” buttons on product images
• Social sharing galleries: Share, Like, and Download buttons on photos
• Team member grids: LinkedIn, Twitter, and Email icon buttons on headshots
• Image libraries: Download and Zoom buttons on image thumbnails

Setting Up Button Overlay Effects

1. In the plugin admin, click Add New.
2. Select Button as the effect type.
3. Choose one of the 11 layouts.
4. Add your images. For each image, configure:
   • First icon — Select a Font Awesome icon class (e.g., fa-heart)
   • First icon URL — Where clicking this icon takes the user
   • Second icon (if the layout supports it)
   • Second icon URL
   • Title — Optional text shown near the buttons
5. Customize button colors, background, border radius, and size.
6. Save and copy the shortcode.

Font Awesome Icon Examples

Here are some commonly used Font Awesome icon classes for button overlays:

• fa-heart: Like/Favorite
• fa-shopping-cart: Add to Cart
• fa-search-plus / fa-magnifying-glass: View / Zoom
• fa-link / fa-external-link: Visit URL
• fa-download: Download
• fa-share-alt: Share
• fa-linkedin / fa-twitter / fa-instagram: Social profiles
• fa-envelope: Email contact

Make sure Font Awesome Support is enabled in the plugin settings (Settings → Font Awesome Support → Yes).

Customization Options

Button Styling

• Button background color (normal and on hover)
• Icon color (normal and on hover)
• Button border radius (square, rounded, or full circle)
• Button size and padding
• Button border width and color

Overlay

• Background overlay color and opacity
• Transition speed

Layout

• Columns per row
• Image border radius
• Spacing between images

Pro Tips

• 🎯 Limit to 2 buttons: More than 2 buttons on a single image feels cluttered. Keep it focused on the most important actions.
• 🎨 Use contrasting button colors: If your overlay is dark, use light button backgrounds, and vice versa.
• 🔵 Make buttons large enough for mobile: On touch devices, buttons need to be at least 44px × 44px to be easily tappable.
• 💡 Match icons to their action: Don’t use a heart icon for a “Download” link. Intuitive icons improve user experience.

Enabling Font Awesome

To use icons, Font Awesome must be enabled. Go to Image Hover Ultimate → Settings and set Font Awesome Support to Yes. If your theme already loads Font Awesome, you can leave this set to No to avoid loading it twice.