Services Style 1

Mohsin Liaquat

Individual Counseling

link

Individual Counseling

link

Individual Counseling

link

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":447,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/1088846771.jpg" alt="" class="wp-image-447"/></figure>
<!-- /wp:image -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Individual Counseling</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p><a href="#">link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

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

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Individual Counseling</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p><a href="#">link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

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

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Individual Counseling</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p><a href="#">link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Pattern CSS

.services-row .wp-block-column{
	position: relative;
}
.services-row .wp-block-column p a {
    position: absolute;
    width: 100%;
    height: 100%;
    text-indent: -100px;
    top: 0;
	left: 0;
    text-indent: -99999px;
    z-index: 9;	
}
.services-row .wp-block-column * {
    z-index: 9;
    position: relative;
}
.services-row .wp-block-column h3 {
    margin: -24px 0 0;
	line-height: 120%;
	font-size: 20px;
	padding: 0 33px;
}
.services-row .wp-block-column p {
    position: unset;
    margin: 0;
}
.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-column {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
}
.services-row .wp-block-image{
	overflow: hidden;
}
.services-row .wp-block-image img {
    width: 100%;
}
.services-row .wp-block-buttons>.wp-block-button {
    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);
}