Scale up (or zoom) hover effect on image

Support
#1

Hello,

My website is patbrosseau.com

I would like to apply a scale up effect on hover on some of the images I have on my site.

The images are elements inserted in columns.
I found this code:
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

I am trying to apply it to the css on the element but without any success. Essentially, I am looking for the image to slighly “pop up” on hover.

Thank you in advance for your help!

Nathalie :slight_smile:

1 Like
#2

Hello Nathalie,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

.x-image img:hover {
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}

Here are some related links for further reading:

Hope this helps.

1 Like
#3

Excellent, works like a charm! Thank you.

Any way we can apply it to a specific element instead of all the images?

Thanks again,

Nathalie :slight_smile:

1 Like
#4

Hello Nathalie,

Thanks for updating the thread. :slight_smile:

You can do that by adding a class name. After that add following CSS under Pro > Theme Options > CSS:

.class-name:hover {
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}

Please change class-name as per your requirement.

Thanks.

1 Like
#5

Sorry, I didn’t get back to you sooner.

Thank you for this, as usual your support is top notch.

Have a great day,

Nathalie sunny:

1 Like
#6

You are most welcome. :slight_smile:

#7

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