Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Zoom in on image

  • 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):

    2. Add this CSS:

    .gb-image.zoom-in:hover {
        transform: scale(1.03);
    .gb-image.zoom-in {
        transition: all 0.3s ease;

    Adding CSS:

    Let me know if this helps!

  • 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;
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.