Therapist Services 10
The above block is copied from the site: https://juliemeddaugh.ghtdev.com/
Pattern HTML
<!-- wp:columns {"className":"service-boxes","style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns service-boxes" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":126,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://juliemeddaugh.ghtdev.com/wp-content/uploads/2025/07/2482312219.jpg" alt="" class="wp-image-126"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center">Individual<br>Therapy</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"box-link"} -->
<p class="box-link"><a href="https://juliemeddaugh.ghtdev.com/individual-therapy/">Box link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":127,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://juliemeddaugh.ghtdev.com/wp-content/uploads/2025/07/2452591635.jpg" alt="" class="wp-image-127"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Couples<br>Therapy</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"box-link"} -->
<p class="box-link"><a href="https://juliemeddaugh.ghtdev.com/couples-therapy/">Box link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":128,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://juliemeddaugh.ghtdev.com/wp-content/uploads/2025/07/2159957511.jpg" alt="" class="wp-image-128"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Young Adult<br>Therapy</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"box-link"} -->
<p class="box-link"><a href="https://juliemeddaugh.ghtdev.com/young-adult-therapy/">Box link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Pattern CSS
#site-container .service-boxes {
position:relative;
}
#site-container .service-boxes .wp-block-heading {
clear: both;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 30px;
width: 258px;
height: 111px;
background: #FFF;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.15);
margin: -60px auto;
position: relative;
z-index: 999;
}
#site-container .service-boxes .wp-block-image img {
border-radius: 40px;
}
#site-container .service-boxes:after {
display: block;
content: '';
width: 816px;
height: 260px;
background: url(assets/images/line-bee-services.png) no-repeat;
position: absolute;
bottom: -300px;
left: 56px;
}
#site-container .service-boxes .wp-block-column {
position:relative;
}
#site-container .service-boxes p.box-link {
position: static;
}
#site-container .service-boxes p.box-link a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 115%;
font-size: 0px !important;
display: block;
z-index: 999;
}
#site-container .service-boxes .wp-block-image img {
transition: transform 0.3s ease;
}
#site-container .service-boxes .wp-block-column:hover .wp-block-image img {
transform: scale(1.05);
transition: transform 0.3s ease;
}
@media only screen and (max-width: 980px) {
#site-container .service-boxes .wp-block-column {
margin-bottom:50px;
}
}
