--- title: "WordPress CSS Hover Effects" id: "193014" type: "page" slug: "wordpress-css-hover-effects" published_at: "2026-03-31T14:50:36+00:00" modified_at: "2026-06-25T11:49:18+00:00" url: "https://fooplugins.com/foogallery-wordpress-gallery-plugin/wordpress-css-hover-effects/" markdown_url: "https://fooplugins.com/foogallery-wordpress-gallery-plugin/wordpress-css-hover-effects.md" excerpt: "Add CSS-style hover effects to WordPress gallery images with FooGallery, including polished thumbnail interactions without writing custom code." --- ![FooGallery WordPress Gallery Plugin](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20272%2030'%3E%3C/svg%3E) # WordPress CSS Hover Effects FooGallery lets you add CSS-style hover effects to WordPress gallery images without touching code. Choose hover effects inside gallery settings. Use effects such as colorize, tint, icon, greyscale, zoom, push, and scale from the live examples. Upgrade when you want PRO hover presets and expanded styling combinations. ![WordPress CSS Hover Effects](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E) [Download FooGallery Free](/foogallery-wordpress-gallery-plugin/download/) [View Demos](#demo) Free included 100K active installs 4.8 / 5 rating 980+ reviews Live demos ## See WordPress CSS Hover Effects Use the demos below to see how you can add CSS Hover Effects with no code. ### Demo 1 – Colorize + Zoom [https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg) Colorize + Zoom Limited Stock [https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/4.jpg](https://fooplugins.com/wp-content/uploads/2025/10/4.jpg) Golden sunset over a grassy countryside The countryside glows in golden evening light, with green fields and a warm orange sky painting the horizon. [https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/6.jpg](https://fooplugins.com/wp-content/uploads/2025/10/6.jpg) Sunlit meadow with trees and mountains Golden sunlight streams across a meadow framed by tall trees, with distant mountains as a backdrop. This demo uses a colorize + zoom hover effect. The caption text is also set to “Slide Down” & icons are turned off. ### Demo 2 – Dark Tint Overlay [https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg) Dark Tint Overlay Limited Stock [https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/4.jpg](https://fooplugins.com/wp-content/uploads/2025/10/4.jpg) Golden sunset over a grassy countryside The countryside glows in golden evening light, with green fields and a warm orange sky painting the horizon. [https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/6.jpg](https://fooplugins.com/wp-content/uploads/2025/10/6.jpg) Sunlit meadow with trees and mountains Golden sunlight streams across a meadow framed by tall trees, with distant mountains as a backdrop. This demo shows a dark tint on hover. The caption text is also set to fade in on hover. ### Demo 3 – White Tint + Scale [https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg) White Tint Overlay Limited Stock [https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/4.jpg](https://fooplugins.com/wp-content/uploads/2025/10/4.jpg) Golden sunset over a grassy countryside The countryside glows in golden evening light, with green fields and a warm orange sky painting the horizon. [https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/6.jpg](https://fooplugins.com/wp-content/uploads/2025/10/6.jpg) Sunlit meadow with trees and mountains Golden sunlight streams across a meadow framed by tall trees, with distant mountains as a backdrop. This demo shows a white tint on hover, with a scaling effect. The caption text is also set to “Slide Up” on hover. ### Demo 4 – Icon + Greyscale + Zoom [https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg) Icon + Greyscale Limited Stock [https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/4.jpg](https://fooplugins.com/wp-content/uploads/2025/10/4.jpg) Golden sunset over a grassy countryside The countryside glows in golden evening light, with green fields and a warm orange sky painting the horizon. [https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/6.jpg](https://fooplugins.com/wp-content/uploads/2025/10/6.jpg) Sunlit meadow with trees and mountains Golden sunlight streams across a meadow framed by tall trees, with distant mountains as a backdrop. 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. ### Demo 5 – Icon + Push [https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/nature.jpeg) Icon + Push This demo shows an icon, together with a caption that pushes the image out of view on hover. Limited Stock [https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/water-surface.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/4.jpg](https://fooplugins.com/wp-content/uploads/2025/10/4.jpg) Golden sunset over a grassy countryside The countryside glows in golden evening light, with green fields and a warm orange sky painting the horizon. [https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg](https://fooplugins.com/wp-content/uploads/2023/02/macro-drop-1.jpeg) [https://fooplugins.com/wp-content/uploads/2025/10/6.jpg](https://fooplugins.com/wp-content/uploads/2025/10/6.jpg) Sunlit meadow with trees and mountains Golden sunlight streams across a meadow framed by tall trees, with distant mountains as a backdrop. This demo shows an icon, together with a caption that pushes the image out of view on hover. Who this is for? ## For galleries that need hover polish without hand-coding CSS. Use CSS-style hover effects when thumbnails should reveal motion, captions, or visual feedback on interaction. - **Designers**Add hover behavior without writing custom CSS for every gallery. - **Portfolio sites**Make image grids feel more interactive while keeping the page clean. - **Marketing pages**Use hover feedback to encourage visitors to explore gallery items. Availability ## FooGallery Free includes this feature. This feature is available in FooGallery Free, and every paid plan includes it too. Included ### Free FooGallery Free includes this feature. Also included ### PRO Starter PRO Starter includes all Free features. Also included ### PRO Expert PRO Expert includes all PRO Starter features. Also included ### PRO Commerce PRO Commerce includes all PRO Expert features. ### Ready for the next step? Read through the relevant documentation or download to immediately get started [Read docs](/documentation/foogallery/appearance-foogallery/hover-effects-settings/) [Download Now](/foogallery-wordpress-gallery-plugin/download/) Upgrade path ## Compare Related FooGallery Features Check out these related FooGallery features to improve your WordPress galleries [/foogallery-wordpress-gallery-plugin/hover-presets/](/foogallery-wordpress-gallery-plugin/hover-presets/) ### [Animated Hover Effect Presets](/foogallery-wordpress-gallery-plugin/hover-presets/) FooGallery Pro Starter comes with a selection of pre-styled hover effects. These unique hover presets save you from having to style your own and add a unique style to your galleries. [/foogallery-wordpress-gallery-plugin/background-fill/](/foogallery-wordpress-gallery-plugin/background-fill/) ### [Thumbnail Background Fill](/foogallery-wordpress-gallery-plugin/background-fill/) FooGallery PRO's advanced features include a thumbnail fill option, which doesn't crop your images in the thumb, and instead fills the space around them. [/foogallery-wordpress-gallery-plugin/slider-gallery/](/foogallery-wordpress-gallery-plugin/slider-gallery/) ### [Slider Layout](/foogallery-wordpress-gallery-plugin/slider-gallery/) Display gallery images in a slider layout. FAQs ## Frequently Asked Questions Answers to common questions about WordPress CSS Hover Effects. ### How do I add hover effects to WordPress gallery images?+ FooGallery lets you add CSS-style hover effects to WordPress gallery images without touching code. Choose hover effects inside gallery settings. ### Are FooGallery CSS hover effects free?+ Yes, FooGallery Free includes a number of hover effects; PRO Starter adds hover presets. Download FooGallery Free to start using this feature, then compare PRO plans when you need advanced controls. ### What do PRO hover presets add?+ FooGallery PRO lets you choose from a number of great looking presets, which cannot be configured in FooGallery Free without adding custom CSS. Have a [look at the demo](/foogallery-wordpress-gallery-plugin/hover-presets/) . ### Do I need to edit CSS for these hover effects?+ Not for the free hover effects in the first 5 demos above. ### Where can I compare hover effects and PRO presets?+ Check out the [hover effect presets in this demo](/foogallery-wordpress-gallery-plugin/hover-presets/) . Start free ## Build this gallery with FooGallery Free WordPress CSS Hover Effects is available in FooGallery Free. Install the plugin when the demo matches your site, then upgrade when you need more advanced controls. [Download FooGallery](/foogallery-wordpress-gallery-plugin/download/) [Read Docs](/documentation/foogallery/appearance-foogallery/hover-effects-settings/) [More Demos](/foogallery-wordpress-gallery-plugin/demos/)