hover effects on image

Hi there,

You’ll need to experiment with the Effects module to achieve that effect.
https://docs.generateblocks.com/article/effects-overview/

Unfortunately, we can’t provide the exact settings for the Effects module, but I can offer some CSS to achieve that, assuming you already have a layout similar to the example and just need to add the effect.

Can you link me to the page and section where you want this effect to be applied? I need to see the selector to provide the correct CSS.

Hi there,

as those images are not 100% width of the container and you want to maintain the border radius ( I assume ) then it will require some CSS:

.has-zoom-image figure {
    width: max-content;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 20px;
}
.has-zoom-image figure img {
    transition: transform  0.2s ease;
}
.has-zoom-image figure:hover img {
    transform: scale(1.1);  
}

Then select the Container Block that has the image inside and give it a CSS Class of: has-zoom-image

Note the CSS adds border-radius and auto margins ( to center ) to the figure element which wraps the image. This is so the image can be zoomed into and not scaled bigger.

So if you add the Container Block around the image, and set the Container Blocks:

i) Layout > Overflow X & Y to hidden
ii) Sizing > Width to max-content
iii) Spacing > Margin Left & Right to auto
iv) Border Radius , set the border radius here instead of the image block

Then select the Image Block, and create a Transform effect

https://docs.generateblocks.com/article/effects-overview/

Set the:
Type to Scale, Device to Desktop, State to Hover and Target to Self.
Then adjust the scale for the effect.
Then Click to add the Transition