Remove hover effect that may not be a hover?

Store Design
1

Here’s the store: https://www.coquettekouture.com

If you scroll down to the bottom, there are 3 social media icons. Each is placed in footer.liquid in a table as a linked image. Don’t ask why because I believe this was a workaround for some issue at some point in the past.

Currently, each image has some sort of opaque overlay effect over it. When you put your mouse over each image the image changes to it’s true color. I thought it was a hover effect but I guess not?

I played with a pointer-events CSS property to turn off the hover, and it did on the Facebook button. That killed the hover effect, but the “non-event” image still has the opaque overlay effect.

So…I guess the hover property reveals the original image and the non-hover displays an image with the opaque overlay effect.

How do I disable that opaque overlay effect so there is no modification to the color of those images?

I can’t seem to identify that setting in any Theme settings.

2

Hi @johnRCG ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/stylesheet.css->paste below code at the bottom of the file:

tbody > tr > td > a {
    opacity: 1 !important;
}

PageFlyVictor_0-1677885196696.png

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Thanks! Works like a charm.

BTW, I use PageFly on another site. LOVE IT!

1 Like
4

Thanks! You’re welcome :heart_eyes: