Images slightly zoom in when mouse hover

Hello There,

Appreciate your help in line with your guidance as I wish to zoom in and zoom out slightly when mouse hover.
Just to put my thoughts to clear, just click on the link https://www.iata.org/pages/default.aspx

Thanks for your support as always.

Regards,
Anil

Hi,

Please post a link to your website and point out an image where you would like to apply this effect, so I can check if it’s possible there.

Kind Regards,
Csaba

Thank you for your quick response.

My web address is: https://traveltourismacademy.com

I wish to apply this effect in various pages where ever the images are available.

Regards,

Anil

Hi,

You can have an image hover zoom effect for all of your SiteOrigin Images, so wherever you add an image inside a SiteOrigin Image Widget it will have a zoom hover effect, with this Custom CSS:

.so-widget-sow-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.so-widget-sow-image img {
    position: relative;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.so-widget-sow-image:hover img {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hello Csaba,

Million thanks for your help. It’s working well.

Best Regards,

Anil

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba