Trying to create a 3D Hover Effect using JS

Ask the community
,
1

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!

1423×592 74.8 KB

2

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.

3

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?

4

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

5

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(https://static.wixstatic.com/media/f57031_5848287a365840769ee1002b9144a99f~mv2.png/v1/fill/w_110,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; 
  } 
</style>