Topic: Zoom in on image

ericbyfooy
April 2, 2024 at 11:51 am

I’m trying to find out how to zoom in on an image when you hover over it, if that’s possible. I searched the support forum and found one article but couldn’t get clear direction on how to do it. I’m trying to zoom in on the images on my home page listed below, if possible. Thank you!
Ying
April 2, 2024 at 1:09 pm
1. Add a css class to the image block, eg. zoom-in.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. Add this CSS:
```
.gb-image.zoom-in:hover {
    transform: scale(1.03);
}

.gb-image.zoom-in {
    transition: all 0.3s ease;
}
```
Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps!
ericbyfooy
April 5, 2024 at 2:33 pm

Thanks a lot Ying that worked! Is there a way to do the zoom-in on my post-grid as well? Please see below under private info. Thanks a lot for you help on the last one with individual images, that did work, but want to try to add same effect to individual posts on a page.
Ying
April 5, 2024 at 3:35 pm
Are you using a block for the posts? The image looks like a block as well, can you add the class to the image block?

If so, change the CSS to this, so it can target all images with zoom-in class, not being limited to GB’s image block.
```
.zoom-in:hover {
    transform: scale(1.03);
}

.zoom-in {
    transition: all 0.3s ease;
}
```

Viewing 4 posts - 1 through 4 (of 4 total)

Zoom in on image