Title: CUSTOM CSS OVERLAY Last modified: September 24, 2021 --- # CUSTOM CSS OVERLAY * Resolved [ian601](https://wordpress.org/support/users/ian601/) * (@ian601) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/) * Hello, * i wonder i f anyone on here can help me with some custom css to achieve the following: * Show all thumbnails of a certain foogallery with an overlay (plain white or black gradient) and then remove overlay on mouse-over. * ? * Thank you very much! * Ian. Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Support [elviiso](https://wordpress.org/support/users/elviiso/) * (@elviiso) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14917828) * Hi [@ian601](https://wordpress.org/support/users/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 * Thread Starter [ian601](https://wordpress.org/support/users/ian601/) * (@ian601) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14918165) * Hi Elvis, * thank you very much for your help. * Followed your instructions but unfortunately it didn’t work. What could i have done wrong? * Best regards, * Ian. * Plugin Support [elviiso](https://wordpress.org/support/users/elviiso/) * (@elviiso) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14927344) * Hi [@ian601](https://wordpress.org/support/users/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/](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. * Thread Starter [ian601](https://wordpress.org/support/users/ian601/) * (@ian601) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14927382) * Hi [@elviiso](https://wordpress.org/support/users/elviiso/) , * thank you very much for your reply. * Please find my galery here: [https://food-fotograf.com/testgal/](https://food-fotograf.com/testgal/) * Best regards, * Ian. * Plugin Support [elviiso](https://wordpress.org/support/users/elviiso/) * (@elviiso) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14927962) * Hi [@ian601](https://wordpress.org/support/users/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/](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/](https://fooplugins.com/documentation/general/faq/start-free-trial/) * Thanks. * Kind regards, Elvis. - This reply was modified 4 years, 8 months ago by [elviiso](https://wordpress.org/support/users/elviiso/). * Thread Starter [ian601](https://wordpress.org/support/users/ian601/) * (@ian601) * [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14928102) * Wow, thanks once again [@elviiso](https://wordpress.org/support/users/elviiso/)! Now works perfectly! * Best regards, * Ian. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘CUSTOM CSS OVERLAY’ 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/) * 6 replies * 2 participants * Last reply from: [ian601](https://wordpress.org/support/users/ian601/) * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/custom-css-overlay/#post-14928102) * Status: resolved