Hi, hopefully a super easy tweak here but I can’t figure out the proper way to do it. When I have an image element in cornerstone and it has a link, there is a white overlay over the image when my mouse is over it. I don’t want that overlay…but can’t figure out how to disable it.
Am I just targeting the x-img-link class, and removing the hover state? I’m confused, any help is appreciated!
Hi There,
Please add the following CSS to Theme Options CSS
a.x-img:not(.x-img-thumbnail) {
transition: opacity 1000s;
}
Hope it helps!
That sort of worked, but now the image as a white overlay when the mouse isn’t over it. Then it disappears and looks normal after a second.
I changed it to:
a.x-img:not(.x-img-thumbnail) {
transition: opacity 0.0;
}
And it seems to work properly now. Thanks!
joe
Sorry, I was wrong. That is still happening on IE and Edge on Windows. On chrome it seems to behave as it should. On Safari on mac it behaves except now the mouse cursor doesn’t change to the hand, it remains as an arrow.
Hello There,
Thanks for updating in! The issue is still there because the css code only removes the transition and not the actual opacity. To resolve this issue, please make sue of this code instead:
a.x-img:not(.x-img-thumbnail),
a.x-img:not(.x-img-thumbnail):hover {
opacity: 1 !important;
}
Hope this helps. Please let us know how it goes.
Thank you, this works when I put it in the CSS of each page, but not if I have it in the child theme’s style.css. Is that the proper way to do it–place it in the CSS area of each page? Seems like it would be better to do this globally in the stylesheet of the child theme.
Hey there,
To make it global, try adding it in your Customizer via Appearance > Customize > Custom > Edit Global CSS:
Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!
Sorry to take so long to reply. Works great and that’s a better place to put it, thanks!
Glad we could help.
Cheers!