CUSTOM CSS OVERLAY

Hi @ian601

Here’s some CSS code snippet that can enable you to create a filter that will do just that:

.foogallery.fg-my-filter .fg-image-wrap:before {
    background: rgba(243, 106, 188, 0.6);
}
.foogallery.fg-my-filter .fg-item-inner:hover .fg-image-wrap:before {
    background: rgba(243, 106, 188, 0);
}

You can then head over to your FooGallery gallery and paste the code to the Custom CSS text area. After that, on that same gallery, navigate to Advanced -> Custom Gallery Class and then add the following class; fg-my-filter

Hope this helps.

Kind regards,
Elvis

Hi @ian601

I tested the CSS code numerous times from my end and it does work perfectly as you can see from this link: https://heatstone.tastewp.com/test-responsive-basic/

Could you kindly share the page with the gallery that you added the code so that I can investigate what is causing the conflict? Thanks in advance for doing so.

Kind regards,
Elvis.

Hi @ian601

You can add the following CSS to the “Custom CSS” of that particular FooGallery gallery and it should have the requested effect.

#foogallery-gallery-714 .fg-image-wrap:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(243, 106, 188, 0.9);
    transition: background-color 0.3s ease-in-out;
}
#foogallery-gallery-714 .fg-item-inner:hover .fg-image-wrap:before {
    background-color: rgba(243, 106, 188, 0);
}

This code will only apply to the gallery on that page. To get it to apply to another different gallery, all you’ll simply need to do is to copy the same code and paste it to those other galleries’ “Custom CSS” section and then replace the gallery IDs with that gallery’s gallery ID.

Lastly, I’d like to let you know that we do have this filter feature on the Appearance settings section of the premium version of FooGallery, FooGallery PRO ( https://fooplugins.com/documentation/foogallery/appearance-foogallery/appearance-settings/)

You can test this feature, and a ton of others, by enabling the trial version. We offer a 7-day free trial period where users can use the premium version of the plugin for free during this period.
All you’ll have to do is to install and activate the free version of the plugin and you’ll then be able to easily activate the trial version, and unlike most plugin trial versions, no credit card or payment details will be needed! Here’s a simple guide from us on how to activate the trial version: https://fooplugins.com/documentation/general/faq/start-free-trial/

Thanks.

Kind regards,
Elvis.

• This reply was modified 4 years, 8 months ago by elviiso.