Services Style 2

Mohsin Liaquat

#Therapy for Adults

#Therapy for Parents

Late Diagnosis ADHD

The above block is copied from the site: Upthink

Pattern HTML

<!-- wp:group {"metadata":{"name":"Services Area"},"className":"services-area","layout":{"type":"constrained"}} -->
<div class="wp-block-group services-area"><!-- wp:columns {"className":"services-row"} -->
<div class="wp-block-columns services-row"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column"><!-- wp:image {"id":460,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/2297383427.jpg" alt="" class="wp-image-460"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><a href="#">#Therapy for Adults</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column"><!-- wp:image {"id":457,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/2248226007.jpg" alt="" class="wp-image-457"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><a href="#">#Therapy for Parents</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|15"}}} -->
<div class="wp-block-column"><!-- wp:image {"id":458,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/2301503519.jpg" alt="" class="wp-image-458"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center"><a href="https://webstyles.therapypracticeaccelerator.com/services-style-2/#">Late Diagnosis ADHD</a></h3>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

.services-row .wp-block-column{
	position: relative;
}

.services-row .wp-block-column h3 {
    margin: 20px 0 0;
    line-height: 120%;
    font-size: 20px;
    padding: 0 33px;
}
.services-row .wp-block-column h3:after {
    content: '';
    width: 130px;
    height: 5px;
    background-color: #ddd;
    display: block;
    margin: 14px auto 0;
}
.services-row .wp-block-column h3 a {
    text-decoration: none;
}

.services-area h2 {
    display: inline-block;
    position: relative;
    font-weight: 700;
    background: url(assets/images/heading-line.png) no-repeat center center;
    background-size: contain;
    background-position: 0 35px;
    margin-top: 65px !important;
}
.services-row .wp-block-image{
	overflow: hidden;
	position: relative;
}
.services-row .wp-block-image img {
    width: 100%;
}
.services-row .wp-block-image:before {
    content: '';
    width: 100%;
    height: 100%;
    background: url(/wp-content/uploads/2025/07/plus-icon.png) no-repeat center rgba(102, 19, 28, 0.90);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}
.services-row .wp-block-column:hover .wp-block-image:before,
.services-row .wp-block-column:focus.wp-block-image:before{
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

#site-container .services-row  h3 a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

@media only screen and (max-width: 980px) {
    #site-container .wp-block-columns {
        max-width: 350px;
    }
}