<section class="gallery">
  <div class="gallery__container ">
    <div class="gallery__item">
      <img class="gallery__pic" src="https://therightsofnature.org/wp-content/uploads/2018/01/turkey-3048299_1920-1366x550.jpg" alt="">
      <div class="gallery__title heading--level_2 heading--weight_medium">CORPORATE DESIGN</div>
      <div class="gallery__description">WE ARE THINKERS</div>
    </div>
    <div class="gallery__item">
      <img class="gallery__pic" src="https://www.pbs.org/wnet/nature/files/2019/07/Super-Hummingbirds-2-1280x675.jpg" alt="">
      <div class="gallery__title  heading--level_2 heading--weight_medium">Web development</div>
      <div class="gallery__description">WE ARE DEVELOPERS</div>
    </div>
    <div class="gallery__item">
      <img class="gallery__pic" src="https://www.adobe.com/content/dam/cc/us/en/creative-cloud/photography/discover/nature-photography/desktop/nature_P1_900x420.jpg.img.jpg" alt="">
      <div class="gallery__title heading--level_2 heading--weight_medium">Web TOOLS</div>
      <div class="gallery__description">WE ARE CREATORS</div>
    </div>
    <div class="gallery__item">
      <img class="gallery__pic" src="https://www.marshallsindia.com/images/younique/nature/nature-cover-slider-6.jpg" alt="">
      <div class="gallery__title">THEMES & PLUGINS development</div>
    </div>
  </div>
</section>

body {
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

.gallery__container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  min-height: 100vh;
  position: relative;
}

.gallery__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75em;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: rgba(0, 0, 0, 0.75);
  }

  &:nth-child(1) {
    .gallery__pic {
      left: 0;
      clip-path: inset(0 75% 0 0);
    }
  }

  &:nth-child(2) {
    .gallery__pic {
      left: -100%;
      clip-path: inset(0 50% 0 25%);
    }
  }

  &:nth-child(3) {
    .gallery__pic {
      left: -200%;
      clip-path: inset(0 25% 0 50%);
    }
  }

  &:nth-child(4) {
    .gallery__pic {
      left: -300%;
      clip-path: inset(0 0% 0 75%);
    }
  }

  &:hover .gallery__pic {
    z-index: -1;
    clip-path: inset(0);
  }

  &:hover .gallery__title {
    opacity: 1;
  }
  
  &:hover .gallery__description {
    opacity: 1;
  }
}

.gallery__pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
  transition: clip-path 1000ms ease;
}

.gallery__title {
  color: #fff;
  transition: opacity 500ms ease;
  opacity: 0.5;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.gallery__description {
  color: #fff;
  transition: opacity 500ms ease;
  opacity: 0.5;
}