Remove standard hover effect

[fbrugger]

Hi there

is it possible to remove the standard hover effect of images in X-Pro, when they are set as a link?

If I hover over a image which is a link, the image lightens. How can I remove this? I just want the image to leave as it is and get a hand pointer when hovering over the image.

Thank you very much for your help!

[christian]

Hey Felix,

Our Image element doesn’t lighten upon hover so you’re most probably using the Classic Image element in which the styling is fixed in our theme and not editable via options.

The official solution for this is to replace the Classic Image element with the Image element. Otherwise, if you don’t like that approach, you need to override our theme’s style using CSS. In case you’re not a developer, you first need to learn CSS and also learn how to use the browser’s element inspector to get the proper selectors.

The benefit of not overriding the Classic Image style though is you have an option in the future in case you’ll need the effect.

Hope that helps and thank you for understanding.

[fbrugger]

Hi Christian

thank you very much for your help! That is exactly what I was looking for! I always used the Classic Elements. So these are not your Elements? Sorry for that - I didn’t realise hat I have to use the “non-classic” Elements! OK, I have learned something again.

With the Classic Image I could have set a Text (in this case where the Link is going to) as a Tool-Tip. I have tried to fill the text in the “Alt Text Field” in the “Image Element” but it is not showing up on the website, when hovering over the image.

Any idea, what I could do?

Thanks again!

[christian]

Hey Felix,

You’re always welcome.

To your question:

@fbrugger

So these are not your Elements?

The Classic Elements are part of our theme. They are, however, not flexible so you need to change them with their V2 counterparts if available.

Because you are using the Info option of the Classic Image though and that is not available in the Image element, regretfully, it would be better to override the style of the Classic Image element because incorporating a tooltip to the Image element would require both CSS and Javascript which is more complicated.

I’ll provide the override code for now but please bear in mind that providing custom code is outside the scope of our theme support. For the rest of the styles that can only be achieved using custom code, you will need to write the code on your own or with help from a 3rd party developer. With that said, here’s the override code to be added in Theme Options > CSS.

a.x-img:not(.x-img-thumbnail):hover {
    opacity: 1;
}

Thanks.