How to add 3d layer hover effect on images with elementor

How to add 3d layer hover effect on images with elementor on wordpress

In this video tutorial, you can learn how to add 3d layer hover effect on images using elementor on WordPress.
Check our other WordPress video Tutorials


/*3D Layered Hover Effect*/
selector{
--gap: 40px;
--rotate: -30deg;
--skew:25deg;
}
selector .elementor-widget-wrap{ transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8);
}
selector .elementor-widget-wrap img{
transition: all .5s;
}
selector .elementor-widget-wrap:hover .gsmlover-4 img{
transform: translate(calc(4*var(--gap)),calc(-4*var(--gap)));
}
selector .elementor-widget-wrap:hover .gsmlover-3 img{
transform: translate(calc(3*var(--gap)),calc(-3*var(--gap)));
}
selector .elementor-widget-wrap:hover .gsmlover-2 img{
transform: translate(calc(2*var(--gap)),calc(-2*var(--gap)));
}
selector .elementor-widget-wrap:hover .gsmlover-1 img{
transform: translate(var(--gap),calc(-1*var(--gap)));
}
@media (max-width: 767px) {
selector{
--gap: 20px;
}
}