How to remove link overlay on images

Support
#1

Hello,

A red overlay and icon appears when I put my cursor over a blog image or product image.
How do I remove this overlay and icon entirely ?
The following images are two examples that I’m experiencing on my website: www.crisisequipped.com

[The overlay I want to remove is the photo on the left. I want the image to remain like the photo on the right when I put my cursor over it. Thank you!]

Thanks so much :slight_smile:
-Nadia

#2

Hello Nadia,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS to remove icon that’s showing on hover:

.x-recent-posts .format-standard .x-recent-posts-img:before{display: none;}

.entry-thumb:before{display: none;}

Above changes are done using custom CSS. If you would like to explore CSS, please take a look at following resource:

https://www.w3schools.com/css/

Thanks.

#3

Thanks so much!

That worked to remove the icons.

When I hover now, there’s just a dark overlay (on blogs) and red hover (on the homepage).
How can I make the overlay lighter so the image below it is still mostly visible?

Thanks :slight_smile:

#4

Hi Nadia,

Please add this code in the Global CSS:

a.entry-thumb:hover img {
    opacity: 0.7;
}

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.45;
}

Hope this helps.

#5

That worked, thank you!

#6

You are most welcome. :slight_smile:

#7

help friend

please read my publication is urgent

#8

PLEASE I NEED HELP INMEDIATELY

#9

Hello @maximuzve,

It’s my humble request, please refrain yourself from posting on tickets started by different user as it creates lot of confusion which result in slow response time. Please take a look at our support handbook for more information:

Thanks for understanding.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.