Trying to create a 3D Hover Effect using JS

Hi, I’m trying to achieve a 3D image hover effect using the Velo Editor and I am completely stuck. I’m not sure how to achieve the same effect in the Velo editor…

Here’s what the effect looks like:

Does anyone know how to rewrite this JS code to work with the Velo editor? I’ll be forever grateful!

All code in Wix Velo is Javascript, however you don’t have access to the DOM.

You can use a Wix Custom Element which lets you add custom elements to your site that are not currently available “out of the box” with the Wix Editor.

Thank you for the response Yisrael, I really appreciate it. So I’ll have to figure out how to build a Wix custom element around this function?

Yes, you can refer to Custom Element documentation , the API , and some examples to learn from.

Hey, Yisrael, thanks for your suggestions. I gave this information to a developer
I paid on Fiverr who worked this out with help from your references.

For anyone who may encounter this challenge in the future. I want to help you out, so here is the code that worked for me:

html { display: flex; justify-content: center; align-items: center; align-content: center; height: 100%; } #tilt { display: block; height: 120px; /*Need to adjust this based on image height and width */ width: 120px; /*Need to adjust this based on image height and width */ margin: 0 auto; transition: box-shadow 0.1s, transform 0.1s; background-image: url(,h_118,al_c,q_85,usm_0.66_1.00_0.01/IMG_0797_PNG.webp); /*Paste the image URL here */ background-size: 100%; background-repeat: no-repeat; }
  #tilt:hover { 
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25); 
    cursor: pointer;