[Resolved] Add hover overlay effect on post image

[Gonzalo]

Hi,
I would like to add an hover overlay effect on post images, like zoom, change color, fade etc.
Can you help me?

Regards

[David]

Hi there,

here’s a starter, this CSS will create a zoom effect on the image hover:

.post-image {
    overflow: hidden;
}
.post-image img {
    transform: scale(1);
    transition: transform 0.35s ease-in;
}
.post-image:hover img {
    transform: scale(1.2);
}

[Gonzalo]

Thank you David, work fine!
I think you should add this option in GP. It`s only CSS 😉

Regards

[David]

You’re welcome 🙂 The beauty of it being additional CSS is we can do a lot more then would be possible in the customizer. But i’ll pass on your suggestion.

[Gavin]

Hello, I’ve tried to copy and paste it onto my additional CSS, but it doesn’t work.

[Fernando]

Hi Gavin,

To have a better understanding of why the code isn’t working for you, may you start a new topic and kindly provide the link to the site in question?

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

Hope to hear from you soon. 🙂

[Author]

Posts