How do I add this exact hover effects on my posts?

Hi Pintu,

Yes, we can tell you. You'll need custom CSS. Try adding this through Appearance > Customize > Additional CSS:

.gb-container.my-article a:hover img {
    transform:scale(0.97);
    box-shadow: 0 0 0 4px rgb(0 0 0 / 3%);
}

.gb-container.my-article a img{
    transition: all 0.5s ease;
}

Hi Fernando,

Thanks a lot, you guys are the reason I love GP.

One slight problem though, the first post (featured post) image is not animating. Can you tell me how to include the first post as well?

Actually, I just used the custom CSS class you have for the other Posts' Container - my-article.

You can simply just add a different class, say custom-hover-effect, to the container Blocks holding the images, and change the code to this:

.gb-container.custom-hover-effect a:hover img {
    transform:scale(0.97);
    box-shadow: 0 0 0 4px rgb(0 0 0 / 3%);
}

.gb-container.custom-hover-effect a img{
    transition: all 0.5s ease;
}

After you've added this code and the class to the Containers, the effect should work.