How to make my archive posts like this

Hi Vidyut,

You can try adding something like this through Appearance > Customize > Additional CSS:

body.archive .inside-article {
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 0 4px 1px #c6c6c6;
    
}
body.archive .inside-article:hover {
    transform:scale(1.05);
    box-shadow: 0 0 16px 1px #000;
}

This is also possible through GB Pro. See: https://docs.generateblocks.com/article/effects-overview/

Not working

Are you trying to replicate the example site exactly?

If so try disabling the Content template you've created first - the example site isn't using one.

Still it is same

Now set the featured image position to above title

Then uncheck display padding around images.

Reference: https://docs.generatepress.com/article/adjusting-the-featured-images/

Okay, it is working. But, I don't want the white space

Also the border, shadows and others are not same as the site I sent.

Lastly, I think the code is only for archive pages, but I want all the post grids like that. For example, I want to show same posts grids in my homepage.

Okay, it is working. But, I don’t want the white space

Add this CSS:

.entry-summary, footer.entry-meta {
    display: none;
}

Then consider reducing the content padding - try something like 30px all around:
https://docs.generatepress.com/article/content-padding/

Also the border, shadows and others are not same as the site I sent.

You can adjust the box-shadow property in Fernando's CSS here:
https://generatepress.com/forums/topic/how-to-make-my-archive-posts-like-this/#post-2524028

This resource might be helpful: https://www.cssmatic.com/box-shadow

Please be mindful of our support forum scope:
https://generatepress.com/what-support-includes/

Thanks!

Thanks a lot, it is working. Lastly, can you tell me when I will create the homepage like the site I sent, how can I show that type of post grid? Because the code is only for Archive pages not for all posts grids.

Thanks.

Can you share a link where it's not appearing like that?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Here in the homepage.

Try adding this CSS:

body.blog .inside-article {
    transition: all 0.3s ease;
    box-shadow: 0 0 4px 1px #c6c6c6;
    overflow: hidden;
    
}
body.blog .inside-article:hover {
    transform:scale(1.05);
    box-shadow: 0 0 16px 1px #000;
}

ok thanks.

You're welcome, Vidyut!