How can I remove the image overlay fade effect using custom CSS?

Store Design
, , ,
1

Hi

I am trying to remove Image overlay fade that appears when hoovering on my section (see screenshots). Is it possible with custom css code? Would i edit it in theme.css?

Website : stockunion.co.uk

IMG_3672.jpg
IMG_3672.jpg1170Ă—1862 102 KB

IMG_3671.jpg
IMG_3671.jpg1170Ă—2086 75.9 KB

IMG_3673.jpg
IMG_3673.jpg1170Ă—1802 133 KB

2

Hi @elo1234

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme.liquid” file. Find the tag and paste the code below before the tag.
.banner-item-text {
    opacity: 1 !important;
    background: transparent !important;
}
.split-image:hover img, .unero-banners-metro ul li:hover img, .unero-banners-grid ul li:hover img {
    opacity: 1 !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

@Made4uo-Ribe didnt work for me not sure why

4

Oh, Sorry i forgot to put the tag.

Please replace this one. And must be sure in the correct location.

Example:

Made4uoRibe_0-1699982527212.png
Made4uoRibe_0-1699982527212.png977Ă—268 10.5 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

@Made4uo-Ribe

Worked thanks so much!!

6

Welcome, please don’t forget to LIKES thanks!