Using the Effects Panel

I am working from your Bed and Breakfast template. I am trying to recreate the zoom effect from this page:

Instead of using the code provided in the template’s text field (or any custom css classes, etc…) I’d like to achieve this same effect using the effects panel. I can easily get an image to zoom by using the Interaction>Transform>Scale. But what I can’t figure out is how to keep the image cropped in the same original space, like the Bed and Breakfast example.

Also like the example, I would like the text over the image to not zoom.

As someone who has never gotten comfortable with code, I use Pro for it’s WSYWIG style interface. As these templates are the best place to learn how things are built, it’s disappointing when I find an effect like this that isn’t created using your interface, but uses code instead.

Thank you!

Hello

Thanks for writing to us.

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

Hope it helps
Thanks

I followed your instructions, and set up a quick example of the section, row, column as shown in your screenshots. The photo increases in size, but I’m still having the same problem: when it scales up in size, it’s not staying “cropped” inside the original column shape.

See the first box on this page: https://ena.b05.myftpupload.com/events/

Hey @capodanno,

Wrap your Image in a Div element and set the Overflow options in the Div to Hidden. By wrapping, I mean add a Div element and move your image to the Div element.

By the way, the Bed and Breakfast demo is an old demo back when the Overflow and Effects options aren’t added yet. That is why they are still in custom code. I believe it will be updated in the future.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.