I am working on a web design. In the web design, I have an image. I added parallax effect to the image with the help of rellax.js. This is the code for adding parallax effect to the image with rellax.js
Now I want to use tilt.js to add the tilt effect to the image. When I hover over the image now, the image is pushed down a few pixels. I don't face this problem when I remove the parallax effect.
The tilt effect itself works, but I don't want the image to be pushed down.
var rellax = new Rellax('.rellax');.about_img {
height: 600px;
width: auto;
float: left;
border: 5px;
border-radius: 20px;
margin: 150px 150px 50px 0px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.10.0/rellax.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.10.0/rellax.min.js"></script><img src='images/about.jpg' alt="" class='about_img rellax' data-rellax-speed="2" data-tilt>One possible solution for the problem is by adding a negative margin-top value on hover like this
img:hover{
margin-top: -100px;
}
This solution is not very elegant and the outcome is very glitchy.
Why does this problem occur, and what can be done to overcome this problem?