How can I create a 50% opacity black overlay on images with CSS?

Store Design
1

Hello,

I’m trying to make a black color overlay with 50% opacity on each image on the Collection Lists page (https://home-hack.shop/collections) the password is “dowdri”. My knowledge is CSS is simply not good enough…

The desired result is all category images are with black overlay and no overlay onhover.

I would be grateful if someone can help.

Thanks

2

@eleibzon

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.tt-promo-box .tt-description {
    background: rgba(0,0,0, 0.5);
}
3

This works perfect! Thank you!

May you please help with removing the overlay on hover?

4

@eleibzon

yes but your password doesn’t work now

5

Strange, it works for me (dowdri)

6

@eleibzon

yes, please update this code

.tt-promo-box .tt-description {
    background: rgba(0,0,0,.5);
    transition: all 0.9s;
}
.tt-description.normal:hover {
    background: transparent;
}
7

Thank you very much!

8

@eleibzon

its my pleasure to help us