Multi Column Hover color

Store Design
1

Hello

How can i add some opacity color only when i hover over my image.

TBS2023_0-1720783573255.png
TBS2023_0-1720783573255.png1339×626 348 KB

https://yoga-spirit-mauritius.myshopify.com/

rtewth

2

Hi,

Need to add hover effect CSS.

Example of CSS

/* Add opacity on hover */
.product-image {
    transition: opacity 0.3s ease; /* Smooth transition */
}

.product-image:hover {
    opacity: 0.7; /* Adjust opacity level as needed */
}

.product-image = actual image class or ID

3

nothing happened

I also want the opacity to be a different color

4

suggestion - you can go for paid shopify developer to solve this issue

5

Hi @TBS2023

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.background-none .multicolumn-card__image-wrapper {
    position: relative; 
}
.background-none .multicolumn-card__image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 0, 0.5);
    opacity: 0; 
    z-index: 1; /
    transition: opacity 0.3s;
}
.background-none .multicolumn-card__image-wrapper:hover::before {
    opacity: 1;
}

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

6

great - thanks