How can I change the mouseover color on a card image?

Store Design
1

Hello,
Need to change the color of the mouseover/hover over a card-image/tiles. Need to change the color from white to black with 75% opacity.

Screenshot_4.jpg
Screenshot_4.jpg1126×407 73.4 KB

2

Hello There,
Please share your store URL.
So that I will check and let you know the exact solution here.

3

hello @eatKrissKross

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

4

Kriss-kross.in /eatkrisskross.shopify.com
PASSWORD: Wheeto

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
body a.card:hover {
    opacity: 1;
}
body a.card:hover .card-image {
    opacity: 1;
    position: relative;
}
body a.card:hover .card-image:before {
    background-color: hsl(0deg 0% 0% / 50%);
    display: block;
    width: 100%;
    content: "";
    height: 100%;
    position: absolute;
    z-index: 999;
}
6

The code breaks the theme. I think there is some other code which is getting override by this one.

7 
/* Body Image Hover */
body a.card:hover {
    opacity: 1;
}
body a.card:hover .card-image {
    opacity: 1;
    position: relative;
}
body a.card:hover .card-image:before {
	background-color: $colorHeadings;
	display: block;
	max-width: 100%;
	content: "";
	height: $heightInput;
	position: absolute;
	z-index: $zindexHeader;
}

Added this code, the overlay is getting off instead of changing the color to black.