Title: Colour icon hover effects
Last modified: September 1, 2020

---

# Colour icon hover effects

 *  Resolved [Marrie80](https://wordpress.org/support/users/marrie80/)
 * (@marrie80)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/)
 * Goodmorning,
 * Is it possible to change the colour of the hover icon? I tried different options
   using the Chrome console and custom css, but nothing worked yet.
 * Thank you in advance for your help.
 * Kind regards,
    Mariëlle Bos

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13345997)
 * hi [@marrie80](https://wordpress.org/support/users/marrie80/)
 * Yes that is possible. What gallery template are you using?
 * [@steveush](https://wordpress.org/support/users/steveush/), please can you provide
   the custom CSS
 *  Thread Starter [Marrie80](https://wordpress.org/support/users/marrie80/)
 * (@marrie80)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13348960)
 * Hi [@bradvin](https://wordpress.org/support/users/bradvin/),
 * Thank you! The template I’m using is the Responsive Image Gallery.
 * Kind regards,
    Mariëlle Bos
 *  Thread Starter [Marrie80](https://wordpress.org/support/users/marrie80/)
 * (@marrie80)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13380427)
 * Hi [@steveush](https://wordpress.org/support/users/steveush/),
 * I haven’t heard from you yet. Can you look into it for me, please?
 * Kind regards,
    Mariëlle Bos
 *  Plugin Author [steveush](https://wordpress.org/support/users/steveush/)
 * (@steveush)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13380550)
 * Hi [@marrie80](https://wordpress.org/support/users/marrie80/),
 * Apologies, I seem to have missed Brad’s initial mention on your ticket. Unfortunately
   the built-in hover icons can not be styled with CSS as they are simply background
   images.
 * The only way to change the icons would be to create your own image and then add
   some custom CSS to replace the original icon with your custom one.
 * To replace the built-in **Zoom** icon you could use the below CSS:
 *     ```
       /* This is used for the default overlays: Light Foreground/Dark Background */
       .foogallery.fg-hover-zoom .fg-image-overlay:before,
       .foogallery.fg-hover-zoom .fg-caption-inner:before {
       	background-image: url('URL-TO-LIGHT-ICON') !important;
       }
   
       /* This is used for the light overlays: Dark Foreground/Light Background */
       .foogallery.fg-light-overlays.fg-hover-zoom .fg-image-overlay:before,
       .foogallery.fg-light-overlays.fg-hover-zoom .fg-caption-inner:before {
       	background-image: url('URL-TO-DARK-ICON') !important;
       }
       ```
   
 * Then in the settings for the gallery you would select the **Hover Effects > Icon
   > Zoom** option to enable the custom icon.
 * Thanks
    Steve
 *  Thread Starter [Marrie80](https://wordpress.org/support/users/marrie80/)
 * (@marrie80)
 * [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13381063)
 * Hi Steve,
 * Thank you for your information. We will take a look at it 🙂
 * Kind regards,
    Mariëlle Bos

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Colour icon hover effects’ is closed to new replies.

 * ![](https://ps.w.org/foogallery/assets/icon-256x256.gif?rev=2602542)
 * [Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel](https://wordpress.org/plugins/foogallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/foogallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/foogallery/)
 * [Active Topics](https://wordpress.org/support/plugin/foogallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/foogallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/foogallery/reviews/)

## Tags

 * [color](https://wordpress.org/support/topic-tag/color/)
 * [colour](https://wordpress.org/support/topic-tag/colour/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)

 * 5 replies
 * 3 participants
 * Last reply from: [Marrie80](https://wordpress.org/support/users/marrie80/)
 * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/colour-icon-hover-effects/#post-13381063)
 * Status: resolved