Trying to create a 3D Hover Effect using JS

Ask the community
,
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>