[Support request] How to make zoom effects on image

[Kha Vo]

Hi, this is my new page using generatepress https://vietcontentchuanseo.com
I do need support to make zoom effects on images (ex: image on homepage, feature image of the blog post, background image… ) on hover.
Can you help me?

[Fernando]

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! 🙂

[Kha Vo]

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.

[Fernando]

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. 🙂

[Author]

Posts