FooGallery is Free forever. Pro adds presest, filters, and more layouts.
100,000+
4.8/5
With FooGallery, you can easily add CSS hover effects to your images in a few clicks, and you don’t need to know how to code. Check out the demos belowing showcasing what you can do with FooGallery.
Colorize + Zoom
This demo uses a colorize + zoom hover effect. The caption text is also set to “Slide Down” & icons are turned off.
Dark Tint Overlay
This demo shows a dark tint on hover. The caption text is also set to fade in on hover.
White Tint + Scale
This demo shows a white tint on hover, with a scaling effect. The caption text is also set to “Slide Up” on hover.
Icon + Greyscale + Zoom
This demo shows an icon, together with a greyscale thumbnail that zooms slightly on hover.
You can choose from 14 different icons, and also change the size.
Icon + Push
This demo shows an icon, together with a caption that pushes the image out of view on hover.
Over 18,000 Combinations!
The demos above show you some examples of the different hover effects you can add, but you can use any combination of the hover effect settings to suit your preference, including:
- Theme : choose an overlay color, which can be dark, light or transparent.
- Color effect : choose to colorize or show greyscale on hover.
- Scaling effect : choose to scale or zoom.
- Caption transition : choose how the caption text transitions on hover.
- Icons : choose from 14 icons and adjust the size.
+Hover Effect Presets!
There are also hover effect presets available which take all the thinking out of creating beautiful hover effects.
The preset in this demo is available in FREE, with 11 more available in FooGallery PRO. Check our our live demo.
CSS Hover Effects FAQs
How do I add a hover effect to images in WordPress without touching code?
If you’d rather not edit your theme’s stylesheet, FooGallery lets you choose from a library of hover effects directly in the WordPress dashboard — no CSS required. Just select an effect from the gallery settings panel and it’s applied automatically to all your thumbnails.
Will adding hover effects slow down my site?
CSS-only hover effects add zero extra load time and there are no additional scripts or images to download. The animations run on the browser’s compositor thread (using transform and opacity), which means they’re GPU-accelerated and won’t cause layout reflows. They’re one of the most performance-friendly enhancements you can make to a page.
Do I need to pay for these hover effects in FooGallery?
No. FooGallery Free comes with all the hover effects demoed on this page. The PRO version does come with 11 more hover effect presets for more sophisticated designs, but everything on this page is available in the free version.
Are there really over 18,000 hover effect combinations?
Yes, we were also surprised by this, but here is the math:
- Theme: 3 options (Dark, Light, Transparent)
- Color Effect: 3 options (None, Colorize, Greyscale)
- Scaling Effect: 4 options (None, Scaled, Zoomed, Semi Zoomed)
- Transition: 7 options (Instant, Fade, Slide Up, Slide Down, Slide Left, Slide Right, Push)
- Icon: 15 different icons available including none.
- Icon Size: 5 options (Default, 1.5x, 2x, 2.5x, 3x)
Total combinations:
3 × 3 × 4 × 7 × 15 × 5 = 18,900!
Still trying to decide?
Upgrade your WordPress Galleries
FooGallery is quick to install and configure.
Add hover effects to your galleries today for FREE, or upgrade for preset power!