Change of image on hover

[bakrona]

Hi there, Many years ago, when I started the site with X theme, I styled the homepage.
There, you have images that change color when you hover. Unfortunately I cannot access the old Forum posts to find out how this was done.

I added a new section and want to reconstruct the same effect. Could you tell me how this is achieved?

[ruenel]

Hello @bakrona,

Thanks for posting in! It seems that you have applied an image hover effect from this thread:

• Create hover image button

Kindly check it out.

[bakrona]

Thank you for your reply.

I can see that i used classes like mbn bottom-img-1. However I cannot find the CSS related to it (not in my page nor in the global CSS). Do you know where that code is located so i can complete it?

[nabeel]

Hey @bakrona,

Thank you for providing the credentials. I checked your setup and I see you’re changing the color of your images using CSS. For this you are setting a colored background image behind the main black and white image using CSS. Now on hover you’re setting the opacity to 0 of the main image so that the colored image shows up on hover.

You can find your implementation in your child theme’s style.css file:

Hope this helps!

[bakrona]

Hi there

Thank you for pointing the location out

I updated the CSS, addressing the class bottom-img-6. For some reason the hover effect is not working. What is the reason it is not working?

[nabeel]

Hey @bakrona,

I checked your page and the image hover effect is working fine on my end, you must be having just a cache issue. Please clear your browser’s cache or you can check your site in incognito mode of Chrome’s browser.

Let us know how this goes!

[bakrona]

it was a cache problem indeed. thanks for your help

[kory]

No problem! Glad things are sorted now.