3D Layer Image Hover Effect in Elementor

 

 

Code snippet for 3D Hover Effect:

selector{
    --distance: 30px;
}
selector{
    transition: 0.5s;
}
selector:hover{
    transform: rotate(3deg) skew(-3deg);
}
selector .elementor-widget-image{
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: 0.5s;
}
selector:hover .elementor-widget-image:nth-child(1){
    transform: translate(calc(-1*var(--distance)), calc(-1*var(--distance)));
}
selector .elementor-widget-image:nth-child(2){
    opacity: 0.8;
    z-index: -1;
}
selector:hover .elementor-widget-image:nth-child(2){
    transform: translate(0, 0);
}
selector .elementor-widget-image:nth-child(3){
    opacity: 0.4;
    z-index: -2;
}
selector:hover .elementor-widget-image:nth-child(3){
    transform: translate(var(--distance), var(--distance));
}