Elementor ile 3D Katmanlı Görsel Hover Efekti

Web sitenizi daha modern ve etkileyici hâle getirmek istiyorsanız görsel efektler büyük bir fark yaratır. Bu yazıda size Elementor ile 3D katmanlı hover efekti oluşturmayı adım adım anlatacağım ve uygulamalı olarak göstereceğim.


https://www.youtube.com/watch?v=FeMksbA-6oQ


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