Team Type Popup 3
The above block is copied from the site: https://screamingeagl1.wpenginepowered.com/who-we-are/
Pattern HTML
<!-- wp:group {"metadata":{"name":"Our Team"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Meet the Team</h2>
<!-- /wp:heading -->
<!-- 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"}} -->
<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"},"className":"whole-box-link","style":{"spacing":{"blockGap":"0"}}} -->
<div class="wp-block-column whole-box-link" data-aos="fade-up" 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 {"style":{"border":{"radius":"8px"}}} /-->
<!-- wp:acf/first-word {"name":"acf/first-word","mode":"preview"} /--></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"}},"typography":{"fontStyle":"normal","fontWeight":"700"}},"textColor":"two"} /-->
<!-- wp:acf/member-position {"name":"acf/member-position","data":{},"mode":"preview"} /-->
<!-- wp:acf/first-word {"name":"acf/first-word","data":{},"mode":"preview"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Pattern CSS
.team-grid .columns-3.wp-block-post-template{
gap:60px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.team-grid .columns-3.wp-block-post-template li {
flex: 0 0 33.33%;
}
.team {
position: relative;
max-width: 350px;
}
.team:after {
content: "";
display: block;
position: absolute;
right: -30px;
top: 0px;
height: 100%;
width: 1px;
border-right: 1px solid var(--wp--preset--color--six);
}
.team:last-child:after,
.team:nth-child(3n + 3):after {
display: none;
}
.team-member-image .first-word {
background: #03384ea6;
position: absolute;
top: 0;
margin-block-start: 0 !important;
width: 100%;
height: 100%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--one);
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.3s;
}
li.team-member:hover .team-member-image .first-word,
li.team-member:focus-within .team-member-image .first-word {
opacity: 1;
}
.team-member-image .first-word h4 {
position: relative;
padding: 0px 0 0;
font-size: 0;
width: 80%;
text-align: center;
color: var(--wp--preset--color--one);
}
.team-member-image .first-word h4::before {
content: "";
background: url("/wp-content/uploads/2025/09/team-arrow.png") no-repeat;
display: block;
width:61px;
height: 35px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.team-member-image .is-style-text-link .wp-block-button__link:after{
display: none;
}
li.team .team-member-image .is-style-text-link .wp-block-button__link{
margin-top: 0px;
}
.first-word h4{
font-size: 17px;
}
li.team:hover .team-member-image .first-word, li.team:focus-within .team-member-image .first-word {
opacity: 1;
}
.team a::after {
content: '';
inset: 0;
position: absolute;
z-index: 10;
}
li.team:hover h5 a{
text-decoration: none;
}
li.team .is-style-text-link .wp-block-button__link{
margin-top: 15px;
}
li.team:hover .is-style-text-link .wp-block-button__link:after{
background-color: var(--wp--preset--color--six);
}
#site-container.single-team main.wp-block-group{
padding-top: 0px;
}
#site-container.single-team .entry-content,
#site-container.single-team .position {
margin-top: 10px !important;
}
.first-word {
margin-top: 10px;
}
