Change the overlay to a gradient underneath title [SOLVED]

Hi Anders (or anyone willing to help with this),

There are 2 issues with the overlay effect:
1 – On mobile the user will never “hover over” a post, so they won’t be able to see the title and date
2 – A page with a lot of posts can become less “appealing” if all the user sees are images without knowing what that is about, unless they hover over.

I would like to create something like this, where the overlay is always ON (no hover over needed) and it only covers the section of the title and date as a gradient:
https://i.ibb.co/9s0DprH/Screen-Shot-2022-10-21-at-9-43-34-AM.png

How can I achieve this?

Thank you and hope someone can help me figure this out! 🙂

EDIT: I was able to create the gradient the way I want it

.has-post-thumbnail .post-overlay {
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 35%, rgba(2,0,36,0) 50%);
}

Now I just need to understand how to disable the effect of hovering over the post.

EDIT 2: I made it work by adding the following:

.has-post-thumbnail .post-overlay {
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 35%, rgba(2,0,36,0) 50%);
	opacity:100;
}

h2.archive-post-title {
	font-size: 1.2em;
	color: #f2f2f2
}

• This topic was modified 44 minutes ago by Tiago.
• This topic was modified 36 minutes ago by Tiago. Reason: Fixed it

The page I need help with: [log in to see the link]