-
ericbyfooy
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!
-
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
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.
-
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; }
- You must be logged in to reply to this topic.