How do I make a hover effect on a picture link I've uploaded

[Createdbyjg]

Hello support team,

Im looking to have a hover effect on my site where it turns a picture-link into text with a low opacity coloured background.

This is a screenshot of my picture-links on my site:

And I wish to have them like this - example of the hover effect on The Grid on one of my pages: http://www.proveno.co/branding-logos/

Please let me know on how I can achieve this!

Thank you

[friech]

Hi There,

The fading effect can be done by adding the CSS below to Theme Options > CSS and applying the class fade to your image.

.fade {opacity: 1;}
.fade:hover {opacity: 0.25;}

Regretfully, adding a text on top of it requires a custom development which falls outside of the scope of support that we can offer. That can be achieved either by a plugin or custom developed function. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for your understanding.

[Createdbyjg]

I understand and thank you so much!

Is there a code where I can have text appear on the image instead of the fade?

[friech]

HI There,

There is but they are not straightforward, you need to modify the code to fit your needs.

https://www.w3schools.com/howto/howto_css_image_overlay.asp

https://miketricking.github.io/bootstrap-image-hover/

Hope it helps,
Cheers!

[Createdbyjg]

Great thank you !

[ruenel]

You are most welcome!