Animation Effect in Image Column

Support
#1

Hi guys

I have 2 rows and each has 2 columns - the background of each column is an image that will be linked to a page when clicked. I need to add a zoom effect ( or any kind of effect but the fade one) into these images.

I will post a secure note next

#2

Hello @LucyKeile,

Thanks for writing in!

The new Column element doesn’t have the fade effect option, If you want to use the fade effect, you can use the Classic ROW as default child which contains the Classic Column, you can follow the instruction provided here (https://theme.co/apex/forum/t/fade-in-in-x-pro/64386/2).

We are planning on adding the feature, but in a different way. We’re going to build a way to add fade and transition controls to all elements. For example, instead of an entire column, you could fade just a button. Or maybe you want to animate in an entire row? The new system will also allow for hover state changes to be applied to different elements. It will most likely be a new set of controls under the “Customize” tab.

Unfortunately, there is no ETA about this. But as soon as we have a timeframe we will provide information on our changelog page (https://theme.co/changelog/)

Regards.

1 Like
#3

I want the zoom effect

I found this post Applying hover zoom to image. but I am not sure it will work on the column

#4

Hi @LucyKeile,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Here’s what you need to do, first add a class to your columns lets say interactive-column, then since its the background that you need to zoom, you’re going to need the .x-bg on your selector, so your CSS selector now for that column is .interactive-column .x-bg, now because you only want the zooming effect when the column is hovered, you need to apply the pseudo-class :hover to the interactive-column, so that will make sure selector like this: .interactive-column:hover .x-bg

To have the zooming effect, what you need is to apply the Transform: scale CSS property to the column with the interactive-column class.

When you properly apply the transform: scale to your column, you’ll get a couple of issue, first is your background-image will overflow on the column when being zoomed. so you’ll going to need an overflow: hidden; CSS property on your interactive-column

The second issue is the zooming effect is drastic, not being smooth. So to make that smooth you need to apply a transition: transform CSS property to the interactive column background-image (.interactive-column .x-bg).

That should achieve the columns’ background-image zooming effect.

For the clickable columns, you need to utilize the .on(‘click touch’) jQuery function together with the window.location.href

You might also interested in the column effects listed below.

Hope it helps,
Cheers!

#5

Thanks! This is a bit more complicated and I don’t have the time but thanks. I changed the page layout it is ok, not great. I feel like something is missing.

I am using the creative columns template in the home page. I like it a lot. Thanks.

Lucy

#6

You’re most welcome,

Cheers!

1 Like
#7

looking forward for this. a lot!

1 Like
#8

Hey Oliver,

Thank you for reaching out to us. Yes it’s an upcoming feature that would add transition state controls to all V2 elements. Stay tuned for the updates.

Cheers!

1 Like
#9

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