[Resolved] how to add css to zoom image on hover

[Deepak]

Hello,

I had added following CSS
.post-image img {
transform: scale(1);
transition: transform .35s ease-in;
}

.post-image:hover img {
transform: scale(1.2);
}

To have a zoom in effect on all the featured image on the archive pages. But I am unable to get a CSS to achieve similar look for my related posts image from jetpack at the bottom of the post (link shared).

Can you please help.

Regards
Deepak

[Elvin]

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.

[Deepak]

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.

[Elvin]

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. 🙂

[Deepak]

Thanks Elvin for the quick support.

This is exactly what I needed 🙂

[Elvin]

No problem. 🙂

[Kha Vo]

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?

[David]

Hi there,

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

[Author]

Posts