Team overlay cards zoom - Blocks Library

Our people make us great

Here we focus on markets where technology, innovation, can unlock long-term value.

You’ll interact with talented professionals, will be challenged to solve difficult problems and think in new and creative ways.

Robert Brown

CEO & Co-Founder

Leslie Livingston

CTO & Co-Founder

Joseph McFall

Front-end Developer

Thom Belly

Front-end Developer

Bonnie Green

React Developer

Lana Byrd

Marketing

<?php
/**
 * Title: Team overlay cards zoom
 * Slug: team-overlay-cards-zoom
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"metadata":{"name":"Team overlay cards zoom"},"className":"team-overlay-cards-zoom","layout":{"type":"constrained"}} -->
<div class="wp-block-group team-overlay-cards-zoom"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"columns-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group columns-wrapper"><!-- wp:group {"className":"left-column","layout":{"type":"constrained"}} -->
<div class="wp-block-group left-column"><!-- wp:heading -->
<h2 class="wp-block-heading">Our people make us great</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here we focus on markets where technology, innovation, can unlock long-term value.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You'll interact with talented professionals, will be challenged to solve difficult problems and think in new and creative ways.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-fill","icon":"arrow-right"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">View more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"right-column","layout":{"type":"constrained"}} -->
<div class="wp-block-group right-column"><!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Robert Brown</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CEO & Co-Founder</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"scale":"cover","sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-2.png" alt="" style="object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Leslie Livingston</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CTO & Co-Founder</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-3.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Joseph McFall</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Front-end Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-5.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Thom Belly</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Front-end Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"scale":"cover","sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-6.png" alt="" style="object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Bonnie Green</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>React Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-7.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Lana Byrd</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Marketing</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

.team-overlay-cards-zoom {
  @apply bg-white dark:bg-gray-900 antialiased;

  .content-wrapper {
    @apply px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;

    .columns-wrapper {
      @apply flex flex-col gap-8 sm:gap-12 xl:gap-16 xl:flex-row xl:items-start;

      .left-column {
        .wp-block-heading {
          @apply text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white;
        }

        p {
          @apply mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400;
        }
      }

      .right-column {
        @apply grid w-full grid-cols-1 gap-4 xl:max-w-3xl shrink-0 sm:grid-cols-2 md:grid-cols-3;
        
        .card-wrapper {
          @apply relative overflow-hidden rounded-lg  max-w-[28.125rem] h-[20rem] lg:h-auto w-full;

          figure {

            img {
              @apply object-cover object-center w-full max-h-[20rem] h-auto scale-100 ease-in duration-300;
            }
          }

          &:hover {
            img {
              @apply scale-125;
            }

          }
          .text-wrapper {
            @apply absolute inset-0 grid items-end justify-center p-4 bg-gradient-to-b from-transparent to-black/60;
        
            &>div {
              @apply text-center;
        
              p {
                @apply text-xl font-bold text-white m-0;
        
                &:last-of-type {
                  @apply text-base font-medium text-gray-300;
                }
              }
            }
          }
        }
      }
    }
  }
}