How to make zoom effects on image

Hi Kha Vo,

For instance, if you have an Image Block inside a Container, you may set a custom CSS class for the Container Block as such: https://share.getcloudapp.com/nOuRkYNJ

Now, with clsss add-zoom-effect, we may now add this CSS:

.gb-container.add-zoom-effect {
    overflow:hidden;
}

.gb-container.add-zoom-effect img:hover {
    transform:scale(1.3);
}

.gb-container.add-zoom-effect img  {
    transition: 0.7s ease-in;
}

Here is how it would look like for instance in your website: https://share.getcloudapp.com/GGulRLAk

Effects are also possible through GenerateBlocks Pro: https://www.youtube.com/watch?v=YLXclTycS9s

Hope this helps! :)

So what I do is

I choose the image (container) > in the "Additional CSS class(es)" I copy your code and save . Is it?
You can see the image here https://ibb.co/bzvQQxc

Sorry for being so specific, as I am new to all the css stuff. And my team does not have any more budget for the generate block pro.

You’re placing the CSS in the CSS class of the Container block. That should only contain: add-zoom-effect.

The CSS should be placed in Appearance > Customize > Additional CSS.

This wouldn’t work with your image though since that image is a background image. The CSS provided is only for Image Blocks.

You would need a different CSS code and a different structure.

Specifically, you would need to place everything inside another Container Block.

Then add a custom CSS class to the Parent Container Block like parent-container. The inner Container Block which has the image should have the class add-zoom-effect.

Then add this CSS in Appearance > Customize > Additional CSS. Replace the image URL with the URL of your Image.

.parent-container{
    overflow:hidden;
}

.make-zoomable:before {
  content: ' ';
  z-index:1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url(https://vietcontentchuanseo.com/wp-content/uploads/2021/12/jeriden-villegas-VLPUm5wP5Z0-unsplash.jpg);
  background-size: cover;
  background-position: center center;
}

.make-zoomable:hover:before {
  transform:scale(1.2);
}

You can remove the Background Image set in the inner Container as well after this.

Hope this clarifies. :)