Get Ready Elementor Templates

Elementor 3D Layered Image Hover Effect | Elementor Pro Tutorial

Subscribe To My YouTube Channel For More Upcoming Videos

3D Layered Hover Effect

/*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 .myImage-4 img{
    transform: translate(calc(4*var(--gap)),calc(-4*var(--gap)));
}
selector .elementor-widget-wrap:hover .myImage-3 img{
    transform: translate(calc(3*var(--gap)),calc(-3*var(--gap)));
}
selector .elementor-widget-wrap:hover .myImage-2 img{
    transform: translate(calc(2*var(--gap)),calc(-2*var(--gap)));
}
selector .elementor-widget-wrap:hover .myImage-1 img{
    transform: translate(var(--gap),calc(-1*var(--gap)));
}
@media (max-width: 767px) {
  selector{
      --gap: 20px;
  }
}