Add the hover effect back on my custom cart icon and change color anytime

[tinedgt]

I changed my custom cart icon but the hover effect was gone and i also can't change the color of it like the usual with my transparent header settings. Shop is https://hallie-td.myshopify.com/ pass is 123. 

[Small_Task_Help]

Hi,

Hope this will work

- Find your cart icon code , something like this:

<a href="/cart" class="custom-cart-icon">
<img src="{{ 'your-cart-icon.svg' | asset_url }}" alt="Cart">
</a>

- Add CSS (for hover color)

Css example

/* Cart icon hover effect */
.custom-cart-icon img {
  transition: filter 0.3s ease, opacity 0.3s ease;
  filter: brightness(1); /* Normal look */
}

/* When mouse hovers over it */
.custom-cart-icon:hover img {
  filter: brightness(0.5); /* Darker on hover, or change as needed */
}

/* Optional: Color tint if using SVG with fill */
.custom-cart-icon svg {
  transition: fill 0.3s ease;
  fill: white; /* default color */
}

.custom-cart-icon:hover svg {
  fill: #ff6a00; /* change to any color you want on hover */
}

- For transparent headers (common in Luxe theme), Add this snippet in same CSS file:

.header--transparent .custom-cart-icon svg {
  fill: white; /* Icon color on transparent background */
}

.header--scrolled .custom-cart-icon svg {
  fill: black; /* Icon color after scrolling */
}

[tinedgt]

where can i find the code? i just replaced the svg link in the icon-cart.svg asset