Colour icon hover effects

hi @marrie80

Yes that is possible. What gallery template are you using?

@steveush, please can you provide the custom CSS

Hi @bradvin,

Thank you! The template I’m using is the Responsive Image Gallery.

Kind regards,
Mari?lle Bos

Hi @steveush,

I haven’t heard from you yet. Can you look into it for me, please?

Kind regards,
Mari?lle Bos

Hi @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

Hi Steve,

Thank you for your information. We will take a look at it ??

Kind regards,
Mari?lle Bos