I have a gallery consisting of 3 images on my homepage (visualradio.eu). When you mouse over the images there is an effect which I would like to disable as there is no action possible for the images. Right now it seems that something will happen when you click the images but this is not the case and not wanted.
Hey marijn!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.avia_transform .avia-gallery-thumb img { opacity: 1; }
.avia_transform .avia-gallery-thumb img.avia_start_animation {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none; }
Regards,
Yigit
Thanks for your reply Yigit, unfortunately nothing seems to change when I add the code to the quick CSS.
Hi!
Please try adding !important rule as following
.avia_transform .avia-gallery-thumb img { opacity: 1!important; }
.avia_transform .avia-gallery-thumb img.avia_start_animation {
-webkit-animation: none!important;
-moz-animation: none!important;
-o-animation: none!important;
animation: none !important; }
Code works fine on my local installation even without !important rules. Please flush browser cache after applying the code. If adding the code to Quick CSS section does not work, try adding it to Custom.css file inside Enfold/Css folder as well
Regards,
Yigit
Hi Yigit,
I have added the code to the quick css but it didnt work, I also added it to my custom css and flushed the browser. I tested both in chrome and in IE bot nothing seems to happen.
I will drop my username/password below in case you want to check it out for yourself.
Hey!
I think you mean the opacity change on the images which can be changed with:
#top .avia-gallery .avia-gallery-thumb a:hover {
opacity: 1;
}
Best regards,
Devin
Thank you Devin, this was exactly what I meant and it worked like a charm. Thanks again!