Search here to get answers to your questions.

General Hover Effects

General hover effects are the most versatile effect type in Image Hover Effects Ultimate. With 33 different layouts, they cover the classic use case of showing text, color overlays, and animations when a visitor hovers over an image. This is the perfect starting point for portfolios, blogs, and business sites.

What Are General Hover Effects?

General effects display an image normally at rest and reveal a styled overlay when the user hovers over it. The overlay can include:

  • A colored or gradient background
  • A heading (title)
  • A description paragraph
  • A clickable link covering the whole image
  • Animated entrance effects (fade, slide, zoom, etc.)

The 33 layouts differ in how the overlay animates in, where the text is positioned, and how the transition is styled.

Common Use Cases

  • Portfolio galleries: Show project titles and categories on hover
  • Team member sections: Display name and role when hovering over a headshot
  • Blog post grids: Show post title and excerpt on hover
  • Product showcases: Highlight product name and a “View Details” prompt
  • Service sections: Show a short description of each service

How to Set Up a General Hover Effect

  1. In the plugin admin, click Add New.
  2. Choose General as your effect type.
  3. Browse the 33 layouts and select one.
  4. Add your images and set titles, descriptions, and links for each.
  5. Customize colors, fonts, animation, and layout settings.
  6. Save and copy the shortcode.

Customization Options

Overlay & Background

  • Solid background color or gradient
  • Overlay opacity control
  • Inner shadow color

Text Content

  • Heading text, size, color, font family, and weight
  • Description text, size, color, line spacing
  • 9 content alignment positions (top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right)

Animation

  • Choose from 70+ CSS entrance animations (fadeIn, slideInUp, zoomIn, bounceIn, etc.)
  • Control animation duration and timing

Layout & Sizing

  • Images per row (1–6 columns)
  • Border radius for rounded corners
  • Padding and margin control
  • Responsive sizing for different screen sizes

Tips for Best Results

  • 🖼️ Use consistent image sizes: All images in a General gallery look best when they share the same width and height ratio.
  • 🎨 Match overlay color to your brand: Use your primary brand color at 70–80% opacity for a professional look.
  • ✍️ Keep descriptions short: One or two lines of text work best. Long paragraphs get cut off on smaller screens.
  • 📐 Set columns responsively: 3 columns works well on desktop, but consider 2 on tablet and 1 on mobile.

While all 33 layouts are fully customizable, some popular choices include:

  • Layout 1: Simple fade overlay, clean and minimal
  • Layout 5: Slide up reveal, text sweeps up from the bottom
  • Layout 8: Border reveal, animated border draws around the image
  • Layout 12: Zoom + fade, subtle zoom on the image with overlay fade

Experiment with different layouts, live preview lets you see each one instantly without saving.

Common Mistakes to Avoid

  • ❌ Too many columns on mobile: Always check the responsive preview.
  • ❌ Low contrast text: Make sure your text color stands out against the overlay color.
  • ❌ Very long titles: They may overflow on smaller image sizes. Keep titles under 6 words when possible.
Still Stuck? Contact us for support.
Last Updated: May 27, 2026