How to hide overflow with image zoom effect?

[fbrugger]

Hi there

I am using the zoom effect from 100% to 110% in images, when hovering over the images.

Is it possible to hide the overflow, so the image zooms in but stays the same width and hight (like behind a mask)?

Thank you very much for your help!

Kind Regards,
Felix

[prakash_s]

Hello Felix,

Thanks for writing to us.

Please have a look at this thread to learn about how to set the zoom effect properly.

Hope it helps
Thanks

[fbrugger]

Hi Prakash

Thank you very much for sending me the link. As I see, the DIV element is used for the overlay. I don’t have a overlay on the image. The text is below the image. Maybe I didn’t describe my problem proper, so i send you the link to the website:
https://coentsch.showmyproject.ch/

In the three columns below the hero slider, the images zoom in, when hovering over the images. But the image frame should stay the same size as the image is with 100%. The overflow when zooming in should be hidden.

Is this possible to acheive?

Thank you very much for your help!

Kind Reards,
Felix

[marc_a]

Hey Felix,

The reason why the images zoom outside the div is that the transform in the effects module was added in the span which is the parent container of img. To achieve your goal, we need to add the CSS in the element CSS of the image. You may copy and paste the code below into the element CSS of your image.

$el {
  overflow: hidden;
  position: relative;
}
$el:hover img {
  transition-duration: 1000ms;
  transition-timing-function: ease-out;
  transform: scale3d(1.1,1.1,1.1);
-moz-transform: scale3d(1.1,1.1,1.1);
	-webkit-transform: scale3d(1.1,1.1,1.1);
}

Reference to the zoom image within the container.

• http://vizua.net/image-zoom-on-hover-inside-a-div

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[fbrugger]

Hi Marc

Thank you very much for your great help! It works very well!

When zooming in it is a nice smooth 1 sec. transition but when zooming out, when leaving the hover, the animation is much quicker and hard. With the built in effect , it was smooth both ways.

Do you know a way to achieve this effect?

Thank you very much for your help!

Kind Regards,
Felix

[fbrugger]

Hi Marc

I have found the solution:
https://coentsch.showmyproject.ch/

Is it possible to set the div as a link, because the link of the image itself doesn’t seem to work within the div.

Thank you very much for your help!

Kind Regards,
Felix

[prakash_s]

Hello Felix,

To change the DIV into the link you need to set the default HTML Tag as an anchor. Please have a look at the given screenshot below.

Thanks

[fbrugger]

Hi Prakash

That’s perfect - Thank you very much for your great support!

Kind Regards
Felix

[marc_a]

Hey Felix,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.