Change Opacity of Gradient ONLY not Text

Hi All! I am in the process of rebuilding my website and have solid gradients that each appear over an image upon hovering, I've lowered the opacity of the gradient (opacity .4) for my desired look on each but the problem is that it is also affecting the text that is on top of the gradient. I would like only the gradient opacity to be lowered and the text to stay at full opacity. Is there a way to add custom css so that when I lower the opacity of the gradient it does not affect my text on top of it? Any help would be appreciated! Thanks!

P.S I have included a screenshot of the problem and the customized css.

Hi,

Can you share link to page in screenshot? We can check code easier

Yes!

I believe this is what you meant. If not please let me know.

Thank you for your help!

10 hours ago, ginna said:

Yes!

 

I believe this is what you meant. If not please let me know.

 

Thank you for your help!

 

 

Can you share your website URL?

Yes!

https://www.ginapagnotta.com/

3 minutes ago, ginna said:

Yes!

 

https://www.ginapagnotta.com/

Replace this code(See attached image) with the code below.

.list-item-content {
    margin-top: -134%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 25%,rgba(0, 0, 0, 0.4) 75%);
    padding: 1rem;
    transition: all 0s;
    z-index: 99;
    opacity: 0;
}
.list-item:hover .list-item-content {
    transition: all 0s;
    opacity: 1;
}

This seems to be working! 

Can I ask if there is a way to change the text to white?

Thank you!

2 minutes ago, ginna said:

This seems to be working! 

Can I ask if there is a way to change the text to white?

 

Thank you!

Sorry I didn't understand. The text already white.

The text changed to black when I pasted the code in. I tried to add in the part of the code that was making the text white but it isn't working.

5 minutes ago, ginna said:

The text changed to black when I pasted the code in. I tried to add in the part of the code that was making the text white but it isn't working.

Can you add the code again and save it? It will be easier to check.

6 minutes ago, ginna said:

The text changed to black when I pasted the code in. I tried to add in the part of the code that was making the text white but it isn't working.

I got it. You have removed this code. That's why text is black. Please add this code again. 

.list-item-content * {
    color: #fff !important
}

I did try this and save it, perhaps I have it wrong?

That worked great!

Thank you so much!

28 minutes ago, ginna said:

That worked great!

Thank you so much!

Welcome!