Combining two separate CSS codes

Hi There,

I was hoping you could help me with two CSS codes I found on the forums that I can’t seem to get to work together. I really like the featured post widget, however, I thought the images were too dark and I would have preferred to be able to click on the pictures as well as the text. I used this guide to help remove the dark overlay, and this guide to make the pictures clickable as a link to the post (though this solution made the text not-clickable, and I would prefer to have both the text and the photo act as links if possible).

Both solutions work perfectly on their own, however, when I try to add them both together only the later one (the image-links) still work, the widget returns to being dark. I’m pretty new to CSS so I might not be adding it properly, what I do is go to Customize > Additional CSS and add the first CSS code (lines 1 to 3), then add the second CSS code starting on line 4).

Do you have any recommendations on how to add these two CSS codes so that they both work together?

Thanks!

Hello,

Did you add JavaScript code with plugin that Kharis mentioned?

Kind Regards, Roman.

Hey Roman,

I did. I followed the instructions exactly.

In order to remove the overlay colour of the images and make them brighter, I went to customize>additional css and inserted the code from lines 1 to 3.

To turn the featured images into links I downloaded the TC Customer JavaScript Plugin, inserted the code provided, then went to customize>additional css and added the code provided frof lines 4 to 33.

To be clear, both css codes worked, just not together. When I have both codes inserted (as described above) the picture links work, but the images are dark because the overlay colour is still there.

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.

Hey Roman,

my site is: https://travisgarner.ca. You’ll notice that the images in the featured image widget are links, but that the image’s are dark. Here is a photo of the code on the back end.

As you can see, the code to remove the colour overlay that makes the photos dark is entered in rows 1 to 3 of additional CSS.

Thanks again.

Hello, try to remove this line:

background-color: rgba(0, 0, 0, 0.5);

It’s row 12 on your screenshot above.

Kind Regards, Roman.

Hey Roman,

That worked perfectly. Thanks so much!

Great! You are welcome :slight_smile:

Kind Regards, Roman.