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;
}
}