[Resolved] Zoom Effect on Hover images homepage

[Manuel]

Hello dear team,
I would like to add Zoom Effect on Hover on the 3 images that I have on my homepage https://manuelmeszarovits.com/
I tried to find the solution on the documentation and forum, but sorry I didn’t find.
Thanks for your time,
Manuel

[David]

Hi there,

1. Add this CSS to your site:

@media(pointer: fine) {
    .has-zoom {
        overflow: hidden;
    }

    .has-zoom img {
        transform: scale(1);
        transition: transform 0.8s ease;
    }

    .has-zoom:hover img {
        transform: scale(1.05);
    }
}

2. Edit the page, select the Image Block you want to apply the zoom effect to. And in Advanced > Additional CSS Class(es) add: has-zoom

[Manuel]

Thank you for your quick reply David.
It’s not working. Maybe I didn’t add the code has-zoom on the right place.
Here you are a screen print https://manuelmeszarovits.com/wp-content/uploads/2022/11/screen-print-has-zoom.jpg
Thanks,
Manuel

[David]

Its fine, i made a mistake in my CSS.
I have updated the CSS here:

https://generatepress.com/forums/topic/zoom-effect-on-hover-images-homepage/#post-2436921

Can you try that.

[Manuel]

Working perfectly David.
And to give a little white opacity with the zoom effect?
Something like: hover .image {
opacity: 0.3;

[Manuel]

Like this code is better but I don’t know how to insert correctly in the CSS:
opacity: 0.5;
filter: alpha(opacity=40);

[Manuel]

Sorry is working perfectly!
Thank you again for your fucking efficient support! The best of the world!
Warm regards,
Manuel

[David]

Glad to be of help 🙂

[Manuel]

Oh sorry David I forgot to ask yesterday. How to make the same on my journal (Archive page) https://manuelmeszarovits.com/journal/
Because I don’t know where are the images to add has-zoom code?
Thanks again for your time,
Manuel

[David]

Replace the above CSS with this:

@media(pointer: fine) {
    :is(.blog, .archive) .post-image,
    .has-zoom {
        overflow: hidden;
    }
    :is(.blog, .archive) .post-image img,
    .has-zoom img {
        transform: scale(1);
        opacity: 1;
        filter: alpha(opacity=100);
        transition: all 0.8s ease;
    }
    :is(.blog, .archive) .post-image:hover img,
    .has-zoom:hover img {
        transform: scale(1.05);
        opacity: 0.5;
        transition: all 0.8s ease;
        filter: alpha(opacity=40);
    }
}

[Manuel]

Working perfectly David.
Thank you so so so so much 😉
Manuel

[David]

Glad to be of help!

[Patrick]

Hi,
I tried to implement the Zoom Hover Effect on my featured post images in post archive.
I added the CSS and the has-zoom in ADDITIONAL CSS CLASS(ES).

but nothing happens: https://staging.tesladriver.net/blog

is it a problem when I use a query loop grid to display my post archive?

best regards
Patrick

[Fernando]

Hi Patrick,

It should work if you add has-zoom to the class list of the GB Image Block.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Can you try adding that and let us know how it goes?

[Patrick]

Hi Fernando,
I tried that. See: https://www.dropbox.com/s/ix6d1oh7cucnod2/GB-image-block-add-css.jpg?dl=0

I also added the CSS in “additional CSS” of Generatepress:

@media(pointer: fine) {
    .has-zoom {
        overflow: hidden;
    }

    .has-zoom img {
        transform: scale(1);
        transition: transform 0.8s ease;
    }

    .has-zoom:hover img {
        transform: scale(1.05);
    }

[Author]

Posts