What's Hot

    Sleep helps protect against non-alcoholic fatty liver

    May 16, 2022

    what is freelancer and how to earn money ?

    March 10, 2022

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

    February 11, 2022
    Facebook Twitter Instagram
    Gsm lover Teach you how to earn money online with freelancing
    • Home
    • Freelancer
    • WordPress
      • WordPress Tutorials
    • SEO
    • Windows
    • Global
    • Lifestyle
    • Contact us
    Facebook Twitter Instagram
    Gsm lover Teach you how to earn money online with freelancing
    Home»Wordpress»How to add 3d layer hover effect on images with elementor
    Wordpress

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

    Silent AngelBy Silent AngelFebruary 11, 2022Updated:February 12, 2022No Comments1 Min Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    How-to-Add-3d-Effect-on-image-with-elementor
    Share
    Facebook Twitter LinkedIn Pinterest Email

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

    How-to-Add-3d-Effect-on-image-with-elementor

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

    Post Views: 842

    Related

    3d layer hover effect 3d layer hover effect on images using elementor
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Silent Angel
    • Website

    Related Posts

    Elementor Color Animated light Border in WordPress

    January 21, 2022

    How to create Cloud animation on WordPress page banner

    January 14, 2022

    How to Create Price table with glass effect in wordpress

    January 8, 2022

    Leave A Reply Cancel Reply

    Don't Miss
    Wordpress

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

    By Silent AngelFebruary 11, 20220

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

    Elementor Color Animated light Border in WordPress

    January 21, 2022

    How to create Cloud animation on WordPress page banner

    January 14, 2022

    How to Create Price table with glass effect in wordpress

    January 8, 2022
    Stay In Touch
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    Our Picks

    Sleep helps protect against non-alcoholic fatty liver

    May 16, 2022

    what is freelancer and how to earn money ?

    March 10, 2022

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

    February 11, 2022

    Elementor Color Animated light Border in WordPress

    January 21, 2022

    Subscribe to Updates

    Get the latest creative news from Gsm Lover about Freelancing, WordPress Web Development, SEO .

    Facebook Twitter Instagram Pinterest
    • Home
    • Windows
    • Freelancer
    • WordPress
    • SEO
    © 2022 Gsm Lover. Deveolped by Pro wp web.

    Type above and press Enter to search. Press Esc to cancel.