Banner Style 1

Mohsin Liaquat

Pattern HTML

<!-- wp:cover {"url":"https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/2048502965-1024x412.jpg","id":434,"dimRatio":50,"customOverlayColor":"#6575bb","isUserOverlayColor":false,"sizeSlug":"large","metadata":{"name":"Therapist Banner"},"align":"full","className":"hero-img-section","style":{"spacing":{"padding":{"top":"var:preset|spacing|200","bottom":"var:preset|spacing|200"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull hero-img-section" style="padding-top:var(--wp--preset--spacing--200);padding-bottom:var(--wp--preset--spacing--200)"><img class="wp-block-cover__image-background wp-image-434 size-large" alt="" src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/2048502965-1024x412.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#6575bb"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"fontSize":"heading-2"} -->
<h1 class="wp-block-heading has-text-align-center has-heading-2-font-size">Align Your Mind, Body, and Spirit</h1>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"35px"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:35px">Christian-based psychotherapy can help you find your balance</h2>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":3,"fontSize":"heading-4"} -->
<h3 class="wp-block-heading has-text-align-center 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"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button">Schedule Your Free Consultation</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

Pattern CSS

.hero-img-section:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    background: -webkit-radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    background: -o-radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    background: -moz-radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.hero-img-section {
    position: relative;
}
.hero-img-section .banner-caption {
    z-index: 9;
}

 
.hero-img-section {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroPanZoom 20s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
}

@keyframes heroPanZoom {
    0% {
        transform: scale(1.3) translateX(0);     /* starting zoom */
    }
    20% {
        transform: scale(1.45) translateX(-5%);  /* stronger left pan */
    }
    50% {
        transform: scale(1.6) translateX(0);     /* max zoom */
    }
    80% {
        transform: scale(1.45) translateX(5%);   /* stronger right pan */
    }
    100% {
        transform: scale(1.3) translateX(0);     /* reset */
    }
}