how to add css to zoom image on hover

Hi there,

I've checked your site and I don't see any featured image element(post-image class). Here's what your page looks like on my end - https://share.getcloudapp.com/Jru4Le4b

Perhaps you're trying to apply it on some other image? Can you point it to us? Let us know.

Sorry for the confusion.

The .post-image img is applied on archive page. So if I hover on them then I see a zoom effect. (homepage and tag page added for reference)

I want to add similar css to my related posts which is available at the bottom of the link which I shared earlier. You can do a ctrl+f "Related post". They also contain thumbnail images where I want to add similar zoom in effect on hover similar to (.post-image img) selector.

Ah, I see what you mean.

The section you're pertaining to is something added by a third-party plugin. This is outside of our scope of support, but to help you out.

Try this CSS:

a.jp-relatedposts-post-a {
    display: block;
    overflow:hidden;
}

a.jp-relatedposts-post-a > img.jp-relatedposts-post-img {
    transform: scale(1);
    transition: transform .35s ease-in;
}
a.jp-relatedposts-post-a:hover  >img.jp-relatedposts-post-img{
    transform: scale(1.2);
}

Not sure how well this works as per your preference. You should ask the plugin developer/support on the best practice on how to apply what you want on it. :)

Thanks Elvin for the quick support.

This is exactly what I needed :)

No problem. :)

Hi, this is my new page using generatepress https://vietcontentchuanseo.com
I do need support to make a zoom effects on image (feature image of the blog post ) or any image like background,... on hover.
Can you help me?

Hi there,

can you start a new topic we're we can provide a dedicated response to you.