Grayscale hover effect on Portfolio Items - Support | Kriesi.at

Tagged: grayscale, hover effect, portfolio item

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

Author

Posts
February 29, 2016 at 5:37 pm #590985

dialedinmarketing
Participant

Hi Kriesi Team,

I’m using the Portfolio Grid element for my ‘team’ page instead of the team member element You may see how I fully utilized it on the link below. How would I be able to make all the images grayscale until I hover on it and remain in color once I have selected it for its preview?

Thanks,
DI

February 29, 2016 at 9:12 pm #591111
Andy
Inactive Moderator
Hi dialedinmarketing!

try this code in Quick CSS field:
```
img.attachment-portfolio.size-portfolio.wp-post-image {
-webkit-filter: greyscale(100%);
}
img.attachment-portfolio.size-portfolio.wp-post-image:hover {
-webkit-filter: none !important;
}
```
Best regards,
Andy
March 1, 2016 at 4:33 pm #591637

dialedinmarketing
Participant

Hi Andy,

That piece of code is now in place but it doesn’t seem to work.

March 1, 2016 at 5:01 pm #591670
Yigit
Keymaster
Hi!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
.grid-image img {
    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;
}
.grid-image img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
}
```
Cheers!
Yigit
March 1, 2016 at 5:06 pm #591677

dialedinmarketing
Participant

Hi Yigit,

That works great for the grayscale effect! Is there a way to have the selected item remain in color?

Thanks

March 1, 2016 at 5:10 pm #591682
Yigit
Keymaster
Hi!

Yes, please change the code to following one
```
.grid-image img {
    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;
}
.active_portfolio_item .grid-image img, .grid-image img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none;
}
```
Cheers!
Yigit
March 2, 2016 at 5:48 pm #592222

dialedinmarketing
Participant

Thanks, Yigit. That’s perfect!

March 2, 2016 at 6:01 pm #592234

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
Author

Posts

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

The topic ‘Grayscale hover effect on Portfolio Items’ is closed to new replies.