Entry title fit with thumbnail (overlay title on features images)

Hi there,

can you provide a link to your new site so i can provide the CSS if it is possible.

im still testing on localhost,but here my site using old theme : https://asdmovies.com
on my old theme ( frontier ) they put post-image div to content.php so i can easily add any div to this ( see this ss below )
https://i.imgur.com/EaTk6D5.jpg
in this screenshot,i can just add "quality" div and put entry-title inside entry-thumbnail so they can display without problem
but on Generatepress,i can't find any post-thumbnail div in content.php (ss below)
https://i.imgur.com/mH6tmo3.jpg
hope you get what i said,im not really good in english.

So I would do the following:

1. Customizer > Layout > Blog --> Featured Images Archive - sets its position above title.
2. Create a New Hook Element:

Hook Content:
<div class="post-wrap"><!-- Open Post wrap -->
Make sure to remove the closing </div> the editor will add.
Select the before_content hook
Set the Display Rules to Blog & All Archives

3. Create another new Hook Element:

Hook Content:
</div>
Select the before after_entry_title hook
Set the the Priority to 5
Set the Display Rules to Blog & All Archives

We should now have the post-imageand the entry-header within our div wrap.

So this CSS will help for the overlay:

.post-wrap {
	position: relative;
}
.post-wrap .post-image {
	margin-bottom: 0 !important;
}
.post-wrap .post-image img {
	vertical-align: middle;
}
.post-wrap .entry-header {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

In the last CSS RULE adjust the bottom, left properties to suit.

Tks David,its working well on pc now,but in tablet and mobile mode,its not.."quality" and title not display correctly
https://i.imgur.com/kVJ9OBI.jpg
https://i.imgur.com/OrZddw1.jpg
i uploaded new theme to my site,you can check it : https://asdmovies.com
Do you need admin / password to check it easy ?

And another problem,tag clod widget not display full,here screenshot

Tested on iphone :

I really need to see a link to the site to tell what the issue is. Are you able to push it to a live domain so i can see?

Yes,here my site now : https://asdmovies.com
and btw,how can i display post grid on mobile too ?.tks

You can try forcing the image to fill the column by changing this CSS:

.post-wrap .post-image img {
	vertical-align: middle;
}

to:

.post-wrap .post-image img {
    vertical-align: middle;
    width: 100%;
}

Tks David,i get it,could you help me solve my sidebar widget problem ? you can check it on my site (genre widget and year widget )
Sorry for disturb.

Hi there,

It looks like you're just using regular links now?

Let me know :)