how to create an image gallery that changes from black and white to color!?

Niko Nemo

Active member

Trusted Uploader

May 28, 2019

498

228

43

• Sep 9, 2020

• #1

Hello friends

I want to create a gallery/portfolio and all photos are in color. I want to make them black and white and when you hover on them to show their real colors

I tried with overlays but it's not what i need, also i don't want to duplicate photos, one regular and one black and white for hover, because it will be lots of images in the portfolio anyway...

On this website, i work with Elementor and Ocean wp theme.

Does someone know how to do that in this case...?!

I hope i explained well

Thanks!

 

frizzel

Well-known member

Trusted Uploader

Jun 13, 2019

485

253

63

Wherever my imagination takes me

• Sep 9, 2020

• #2

You can do that with some simple css. Like so:

CSS:

.graygallery img {
   filter: grayscale(100%);
   transition: all 0.5s ease;
}

.graygallery img:hover {
   filter: grayscale(0%);
}

This assumes your gallery has the class 'graygallery'. If the images all have a class (e.g. 'gray') you can also use 'img.gray' instead of '.graygallery img'.
In the code above 'transition: all 0.5s ease' means that the color appears smoothly in half a second.

 

• 

Reactions: Niko Nemo

Niko Nemo

Active member

Trusted Uploader

May 28, 2019

498

228

43

• Sep 9, 2020

• #3

Oh nice!

This code will affect only the gallery not all the images around the site...?!

Thanks!

Edit:

I tried with this code, put it in Costumize/Aditional css and saved but nothing has changed unfortunatelly.

 

Last edited: Sep 9, 2020

frizzel

Well-known member

Trusted Uploader

Jun 13, 2019

485

253

63

Wherever my imagination takes me

• Sep 10, 2020

• #4

You of course need to know the actual class or ID of your gallery or the class of the images within that gallery and adjust the code accordingly. Just copy/pasting above code will indeed not do anything, unless your gallery happens to have the class 'graygallery'.

 

• 

Reactions: Niko Nemo

Niko Nemo

Active member

Trusted Uploader

May 28, 2019

498

228

43

• Sep 10, 2020

• #5

Css not my cup of tea

Thanks anyway!

 

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,392

120

• Sep 10, 2020

• #6

Are they standard images being displayed in a gallery or is each image a custom portfolio post type?

 

• 

Reactions: Niko Nemo

Niko Nemo

Active member

Trusted Uploader

May 28, 2019

498

228

43

• Sep 10, 2020

• #7

Standard images, Elementor pro gallery...

 

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,392

120

• Sep 10, 2020

• #8

Niko Nemo said:

Standard images, Elementor pro gallery...

Click to expand...

Ok, give me a few minutes.

One of the addons has an enhanced gallery element that does this. But I can't remember off the top of my head which one. So I'm just checking now for you.

 

• 

Reactions: Niko Nemo

MrSam_1

Well-known member

Administrative

Trusted Seller

Dec 1, 2018

24,129

27,392

120

• Sep 10, 2020

• #9

Actually you don't need an addon...

1) Select the Gallery to Edit
2) Go to the style tab
3) On the image dropdown keep it on normal and click the pencil icon next to CSS Transform
4) Move the saturation slider down to 0
5) Then go to the overlay dropdown and switch to Hover
6) Change the Color value to RGB(0,0,0)
7) Job done!

 

• 

Reactions: Niko Nemo

Niko Nemo

Active member

Trusted Uploader

May 28, 2019

498

228

43

• Sep 10, 2020

• #10

That's it medw1311 Thanks a lot!
Mystery solved!
Thank you very much, to both of You!!!

 

• 

Reactions: MrSam_1