Banner Style 2

Mohsin Liaquat

The above block is copied from the site: Upthink

Pattern HTML

<!-- wp:cover {"url":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/2256096953-1024x412.jpg","id":438,"dimRatio":50,"customOverlayColor":"#9cb0bd","isUserOverlayColor":false,"isDark":false,"sizeSlug":"large","metadata":{"name":"Therapist Banner"},"align":"full","className":"hero-img-section","style":{"spacing":{"padding":{"top":"var:preset|spacing|110","bottom":"var:preset|spacing|110"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light hero-img-section" style="padding-top:var(--wp--preset--spacing--110);padding-bottom:var(--wp--preset--spacing--110)"><img class="wp-block-cover__image-background wp-image-438 size-large" alt="" src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/2256096953-1024x412.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#9cb0bd"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"banner-caption","layout":{"type":"constrained"}} -->
<div class="wp-block-group banner-caption"><!-- wp:heading {"textAlign":"center","level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first","fontSize":"heading-2"} -->
<h1 class="wp-block-heading has-text-align-center has-first-color has-text-color has-link-color has-heading-2-font-size">Optimize Your Life</h1>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first","fontSize":"heading-3"} -->
<h2 class="wp-block-heading has-text-align-center has-first-color has-text-color has-link-color has-heading-3-font-size">Christian-based psychotherapy can help you find your balance</h2>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first","fontSize":"heading-4"} -->
<h3 class="wp-block-heading has-text-align-center has-first-color has-text-color has-link-color has-heading-4-font-size">Online Therapy for Individuals and Couples in Florida</h3>
<!-- /wp:heading -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","backgroundColor":"first","textColor":"second","style":{"elements":{"link":{"color":{"text":"var:preset|color|second"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-second-color has-first-background-color has-text-color has-background has-link-color has-text-align-center wp-element-button">Schedule Your Free Consultation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Pattern CSS

.hero-img-section .banner-caption {
    max-width: 554px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 50px 30px;
    text-align: center;
    float: left;
}
.hero-img-section .wp-block-cover__inner-container {
    max-width: 1170px;
}

.zoom img {
    animation: slowZoom 15s linear infinite alternate;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d
}

@keyframes slowZoom {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}