Colors, Gradients & Overlay Settings
The color and overlay settings are where your hover effects come to life visually. Getting these right makes the difference between a hover effect that looks amateurish and one that looks polished and professional. Here’s a complete guide to all the color and overlay controls available in Image Hover Effects Ultimate.
Understanding the Overlay
When a visitor hovers over an image, a colored layer appears on top of it, this is the overlay. The overlay serves two purposes:
- Creates a visual contrast background for text and buttons to sit on
- Signals to the visitor that the image is interactive
The overlay is controlled by three key properties: color, opacity, and whether it’s a solid color or a gradient.
Overlay Background Color
The main background color of the hover overlay. Click the color swatch to open the color picker.
Popular overlay color approaches:
- Brand color overlay: Use your primary brand color (e.g., deep blue, burgundy) for a cohesive look across all gallery items
- Dark overlay (#000000 or #1a1a1a): Neutral, works with any image, ensures maximum text readability
- White overlay (#ffffff): Soft, minimal, works well with dark text and light-tone imagery
- Tinted overlay: A pastel or muted color for a subtle, artistic feel
Overlay Opacity
Opacity controls how transparent the overlay is. Range: 0 (fully transparent) to 1 or 100% (fully opaque).
| Opacity | Effect | Best For |
|---|---|---|
| 20–40% | Subtle tint, image clearly visible | Minimal/artistic designs |
| 50–70% | Balanced, image and text both readable | Most portfolio/product sites |
| 80–90% | Strong overlay, text very clear | High-contrast, information-heavy overlays |
| 100% | Fully opaque, image completely hidden | Flip box back sides, feature cards |
Gradient Overlays
Instead of a solid color, you can use a gradient that transitions between two colors. Gradients add visual depth and sophistication.
Types of Gradients
- Linear gradient: Color transitions in a straight line (top to bottom, left to right, diagonal)
- Radial gradient: Color radiates from a center point outward
Popular Gradient Combinations
- Dark to transparent: Black fading to transparent from bottom to top. Perfect for caption effects, text is readable at bottom, image visible at top.
- Brand color to darker shade: Creates depth while staying on-brand (e.g., #0066cc to #003366)
- Two brand colors: Diagonal gradient between complementary brand colors for a modern look
- Warm tones: Orange to pink to purple for lifestyle/creative brands
Inner Shadow Color
The inner shadow adds a soft glow or shadow inside the image border on hover. This creates a framed-spotlight effect, the center of the image is lit, and the edges dim slightly.
Set this to a dark color (black with opacity) for a vignette effect, or to your brand color for a colorful glow.
Content Background Color
Some layouts show the text in its own colored box rather than directly on the image overlay. The content background color controls this text box color.
Use a semi-transparent color (e.g., black at 60% opacity) so the image still shows through behind the text area.
Hover State Colors
For button overlays, you can set separate colors for the normal state and hover state of each button:
- Button background color: Normal state
- Button background hover color: When the cursor moves over the button itself
- Button icon/text color: Normal state
- Button icon/text hover color: On button hover
Pro Tips for Color Choices
- 🎨 Sample your image colors: Use a browser eyedropper tool to pick a color from the image itself for the overlay. This creates a harmonious look where the overlay feels connected to the photo.
- 🔲 Dark overlays are safer: Light overlays require careful attention to contrast. When in doubt, go dark.
- 🌈 Limit your palette: Use the same overlay color across all items in a gallery for visual consistency. Reserve a different color for a featured or highlighted item.
- 💡 Test on different image types: A blue overlay looks great on nature photos but can look odd on portraits or product shots. Preview your effect across all the images in your gallery.
Common Mistakes
- ❌ Overlay too dark with dark images: The image disappears entirely. Use a lighter overlay or reduce opacity.
- ❌ Overlay too light with light images: Text becomes invisible. Add a dark text shadow or increase opacity.
- ❌ Using too many different overlay colors: A gallery with 6 different overlay colors looks random. Use 1–2 colors max.