Your Important

Text Here

  1. Please add the below code to your Additional CSS space under Appearance > Customize.
  2. Please also delete the CSS from the Additional CSS space on the above Row Layout so that you can edit the contents.
  3. Then you can delete this section of instructions.
.kadence-pin-zoom-section {
    position: relative;
    min-height: 220vh;
    view-timeline-name: --pinzoom;
    view-timeline-axis: block;
}

.kadence-pin-zoom-section > .kt-row-column-wrap {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: block !important;
}

/* image layer */
.kadence-pin-zoom-section .zoom-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    clip-path: inset(32vh 36vw round 30px);

    animation: zoom-bg-open linear both;
    animation-timeline: --pinzoom;
    animation-range: contain 0% contain 100%;
}

.kadence-pin-zoom-section .zoom-bg .kt-inside-inner-col {
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
}

/* text layer */
.kadence-pin-zoom-section .kadence-column86288_48e957-fb {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.kadence-pin-zoom-section .kadence-column86288_48e957-fb .kt-inside-inner-col {
    width: 100%;
}

/* text */
.kadence-pin-zoom-section .slide-left,
.kadence-pin-zoom-section .slide-right {
    animation-timeline: --pinzoom;
    animation-range: contain 0% contain 100%;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

.kadence-pin-zoom-section .slide-left {
    animation-name: slide-text-left;
}

.kadence-pin-zoom-section .slide-right {
    animation-name: slide-text-right;
}

@keyframes zoom-bg-open {
    from {
        clip-path: inset(32vh 36vw round 30px);
    }

    to {
        clip-path: inset(0 round 0);
    }
}

@keyframes slide-text-left {
    from {
        transform: translateX(-55vw);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-text-right {
    from {
        transform: translateX(55vw);
    }

    to {
        transform: translateX(0);
    }
}
Search
BPB – Checkboxes
  • BLOG POST BUILDERS (220)
    • – Highlighted Notes (33)
    • – Styled Lists (28)
    • – Call to Action (20)
    • – Blog Post Sections (17)
    • – Featured Products – Manual (14)
    • – Affiliate Product Promotions (13)
    • – Email Optins (13)
    • – Featured Blog Posts – Kadence Free (13)
    • – Testimonials/Reviews (11)
    • – Podcast Callouts (10)
    • – FAQs (9)
    • – Borders (7)
    • – Gallery (7)
    • – LTK Ready (6)
    • – Quotes (6)
    • – Tips (6)
    • – Author Box (5)
    • – Table of Contents (5)
    • – Youtube/Video (5)
    • – Featured Blog Posts – Kadence Pro (4)
    • – Sharing (4)
    • – Featured Products – WooCommerce (2)
    • – Image Captions (2)
    • – Pros and Cons (2)
    • – Tables (2)
    • – Search (1)
  • PROBUILDER BLOCKS (96)
    • – Elements (51)
      • – – Sidebar Elements (15)
      • – – Archive Elements (10)
      • – – Footer Elements (8)
      • – – Archive Loop Item Elements (5)
      • – – Post Title Elements (5)
      • – – Mega Menu Elements (3)
      • – – 404 Page Elements (2)
      • – – Mobile Menu Elements (1)
      • – – Promo Elements (1)
    • – Pro Blocks (45)
      • – – Featured Posts (34)
      • – Hero Sections (18)
      • – – Image Overlay (5)
      • – – Modal Blocks (4)
      • – – Slider Blocks (3)
  • WEBSITE BUILDERS (90)
    • – Featured Sections (15)
    • – 3 Columns (10)
    • – Membership (10)
    • – About Section (8)
    • – Marquee (4)
    • – 4 columns (3)
    • – 6 Columns (3)
    • – Pricing Tables (3)
    • – Tabbed Blocks (3)
    • – Timelines (3)
    • – Instagram Pages (2)
    • – Navigation (2)
    • – Reviews (2)
  • FULL POSTS (23)
    • – Roundup Posts (7)
    • – Listicle Posts (4)
    • – For Podcasters (3)
    • – For Faith Based Bloggers (2)
    • – For Food Bloggers (2)
    • – For Photographers (2)
    • – Interview Posts (1)
    • – Q and A Posts (1)
  • **NEW** (10)