grayscale hoover via css for images in widgets, i.e. in footer - Support

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

Author

Posts
September 29, 2016 at 12:24 pm #693067

fluid
Participant

Dear Enfold Gurus!
Thank you very much for setting up this great Theme, I hope ypu can help me this question:
I’d like to add a hoover effect to images placed in a footer widget. I got them there with plain html, not via Avia Builder as I did not find the short codes.
So now I would like to have coloured images with a greyscale filter and when the cursor is placed on them the filter is turend off. So its gonna be something like:

div.avia-image-container div a img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

div.avia-image-container:hover div a img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

Found this in an other topic.
Now I don’t know how to adress those images placed with plain htm in a footer widget – can you guys help me out?

Thank you very much in advance!

September 29, 2016 at 2:21 pm #693111
Yigit
Keymaster
Hey fluid!

Please use the code as following
```
#footer .image-overlay {
    display: none!important;
}
#footer img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
}
#footer img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
}
```
Best regards,
Yigit
September 29, 2016 at 3:12 pm #693139

fluid
Participant

Dear Yigit!

You guys rule, that’s for sure.
Actually I wanted the function to be just the other way round but that was an easy fix, now you gave me that great code.

Thank you very much for this incredibly fast reaction, kinda saved me as a public presentation of that site will be tomorrow afternoon ;-)

Greetings to you and the team an have a nice day!

### problem solved ###

September 29, 2016 at 3:17 pm #693142

Yigit
Keymaster

Hey!

You are welcome!
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Regards,
Yigit

September 29, 2016 at 3:17 pm #693145

Basilis
Inactive Moderator

Hey!

Please do feel free to let us know if anything else is needed.
Always remember to rate our theme at themeforest, it does help us get better.

Thanks a lot for your understanding and patience

Cheers!
Basilis
Author

Posts

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

The topic ‘grayscale hoover via css for images in widgets, i.e. in footer’ is closed to new replies.