How to make a mouse hover zoom effect on an image?

[phb]

Hi Pro Team!

Can I make a mouse hover zoom effect on an image using Dashboard Pro? I didn’t find any settings in my image to do this. The effect I want to do is similar to this video: https://www.youtube.com/watch?v=QQsdkHLZvu0

Thank you in advance.

[christian]

Hey Aline,

That effect would require custom HTML and CSS. We do not provide custom code as part of our theme support but the good news is, the custom code is readily available in our Bed and Breakfast demo. Hover over the image under the Explore our rooms section here: https://demo.theme.co/bed-and-breakfast/

I’d recommend that you set up an online or local test site and install the Bed and Breakfast demo there. Once installed inspect the HTML content of the Text element.

• 

It works in tandem with the CSS in Theme Options > CSS. The CSS you are looking for is under the Image Grid section or CSS comment.

• 

-----------------------------------------------------------------------------------

You might wonder why I recommended to set up a test site rather than just paste our demo’s custom code here. The reason for that is you won’t learn how that can be achieved if I paste the code here. It’s best that you see how custom code is integrated in our theme.

Hope that helps.

[phb]

Thanks for the tip. I managed to make the effect. A post that also helped me understand the subject was this: https://w3bits.com/css-image-hover-zoom/ .

[ruenel]

You’re most welcome Aline!
We’re glad @Christian were able to help you out.