Image hover animation

Hello,

I would like to ask how to add hower animation Zoom in at the image on this page:
https://favoridecor.fr/inspiration/

Hi Blissdates,

Thanks for reaching to us.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.wd-image{
  overflow: hidden;
	border-radius: 50%;
}

div.wd-image img{
	width: 100%;
	transition: transform .5s ease;
  
}

div.wd-image:hover img{
  transform: scale(1.5);
}

Best Regards,

Thank you,
But now I have a small bug, please see the pictures attached.

Attachments:

You must be logged in to view attached files.

[Hung Pham]

Hi Favori,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.wd-enabled-flex>.vc_column-inner>.wpb_wrapper>*:not(.wd-enabled-width):not(.inline-element) {
	width: auto;
}

Best Regards,

• This reply was modified 3 months, 1 week ago by Hung Pham.

Unfortunately even with these lines I have same problem.
please find attached the credentials in case if you want to have admin acces

Hi Favori,

I helped you to modify CSS codes, please check again.

Best Regards,

Thank you so much!

Oh.
Now I have a bug on the main page

Attachments:

You must be logged in to view attached files.

It’s not only on the main page it’s everyxhete wwhete I have image …

Attachments:

You must be logged in to view attached files.

Hi Favori,

You need to put class image-zoom-effect to the Row https://prnt.sc/6rqx1FOO5kKL

Best Regards,

Hi,
Thank you so much !

Hi Favori,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts