Team Type Popup 4
The above block is copied from the site: https://cascadefinadev.wpenginepowered.com/about/
Pattern HTML
<!-- wp:group {"metadata":{"name":"Team"},"animationsForBlocks":{"animation":"fade","variation":"right","once":true,"mirror":false,"easing":"linear"},"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|50"}}},"backgroundColor":"eight","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-eight-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--50)" data-aos="fade-right" data-aos-easing="linear" data-aos-once="true"><!-- wp:image {"id":126,"sizeSlug":"large","linkDestination":"none","animationsForBlocks":{"animation":"fade","variation":"fade","once":true,"mirror":false,"easing":"linear"},"align":"center"} -->
<figure class="wp-block-image aligncenter size-large" data-aos="fade" data-aos-easing="linear" data-aos-once="true"><img src="https://cascadefinadev.wpenginepowered.com/wp-content/uploads/2025/11/Layer_1.svg" alt="" class="wp-image-126"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":3,"animationsForBlocks":{"animation":"fade","variation":"fade","once":true,"mirror":false,"anchorPlacement":"","easing":"linear"}} -->
<h3 class="wp-block-heading has-text-align-center" data-aos="fade" data-aos-easing="linear" data-aos-once="true">Meet The Cascade Team</h3>
<!-- /wp:heading -->
<!-- wp:group {"metadata":{"name":"Our Team"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:0"><!-- wp:group {"metadata":{"name":"Team Members"},"className":"team-grid","style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained","contentSize":"900px"}} -->
<div class="wp-block-group team-grid" style="padding-top:var(--wp--preset--spacing--30)"><!-- wp:query {"queryId":1,"query":{"perPage":60,"pages":0,"offset":0,"postType":"team","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[],"format":[],"disable_pagination":true,"include_posts":[],"meta_query":{}},"namespace":"advanced-query-loop"} -->
<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"0"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"animationsForBlocks":{"animation":"fade","variation":"up","once":true,"mirror":false,"easing":"linear","delay":100},"className":"whole-box-link","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column whole-box-link" data-aos="fade-up" data-aos-delay="100" data-aos-easing="linear" data-aos-once="true"><!-- wp:group {"metadata":{"name":"Team Member Image"},"className":"team-member-image","layout":{"type":"constrained"}} -->
<div class="wp-block-group team-member-image"><!-- wp:post-featured-image {"aspectRatio":"auto","sizeSlug":"full","align":"center","style":{"border":{"radius":"8px"}}} /--></div>
<!-- /wp:group -->
<!-- wp:post-title {"level":5,"isLink":true,"className":"fancybox-iframe","style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"spacing":{"margin":{"bottom":"0px","top":"20px","left":"0"}}},"textColor":"two"} /-->
<!-- wp:acf/member-position {"name":"acf/member-position","mode":"preview"} /-->
<!-- wp:acf/first-word {"name":"acf/first-word","mode":"preview"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Pattern CSS
.team-grid .columns-3.wp-block-post-template{
gap:30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.team-grid .columns-3.wp-block-post-template li {
flex: 0 0 30.33%;
text-align: center;
}
.wp-block-group.team-member-image {
background-color: var(--wp--preset--color--eight);
border-radius: 100%;
border: 6px solid var(--wp--preset--color--one);
position: relative;
max-width: 226px;
margin: 0 auto;
}
li.team-member:hover .wp-block-group.team-member-image ,
li.team-member:focus-within .wp-block-group.team-member-image {
background-color: #DADACF;
}
.wp-block-group.team-member-image figure{
overflow: hidden;
border-radius: 100%;
transition: all 0.3s;
}
.wp-block-group.team-member-image figure img{
transition: all 0.3s;
}
li.team-member:hover .wp-block-group.team-member-image figure img,
li.team-member:focus-within .wp-block-group.team-member-image figure img{
transform: scale(1.1);
transition: all 0.3s;
}
.wp-block-group.team-member-image:after {
content: "";
display: block;
width: calc(100% + 12px);
height: calc(100% + 12px);
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
border: 2px solid var(--wp--preset--color--eight);
top: -8px;
left: -8px;
}
li.team-member:hover .team-member-image .first-word,
li.team-member:focus-within .team-member-image .first-word {
opacity: 1;
}
li.team-member .position{
font-size: 16px;
color: var(--wp--preset--color--three);
}
.first-word p {
position: relative;
padding: 13px 0 0;
text-align: center;
color: var(--wp--preset--color--three);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
border-top: 1px solid #CECEC4;
}
.first-word p::after {
content: "";
background: url("https://patterndev.upthinksolutions.com/wp-content/uploads/2025/11/team-arrow.svg") no-repeat;
display: block;
width:25px;
height: 15px;
position: relative;
top: 0;
}
li.team .team-member-image .is-style-text-link .wp-block-button__link{
margin-top: 0px;
}
li.team:hover .team-member-image .first-word, li.team:focus-within .team-member-image .first-word {
opacity: 1;
}
.team-member{
position: relative;
}
.team-member a::after {
content: '';
inset: 0;
position: absolute;
z-index: 10;
}
li.team-member h5 a{
font-size: 19px;
}
li.team-member:hover h5 a{
text-decoration: none;
}
li.team-member .is-style-text-link .wp-block-button__link{
margin-top: 15px;
}
.first-word {
margin-top: 13px;
padding-bottom: 5px;
}
@media only screen and (max-width: 980px) {
.team-grid .columns-3.wp-block-post-template li {
flex: 0 0 40.33%;
}
}
