JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="grid">
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/1.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/2.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/3.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/4.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/5.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/6.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
        class="grid__item-img"
        style="
          background-image: url(https://raw.githubusercontent.com/SmartWrh/blog/main/img/7.jpg);
        "
      ></div>
    </div>
  </figure>
  <figure class="grid__item">
    <div class="grid__item-imgwrap">
      <div
       ...

CSS

*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #fff;
  --color-link-hover: #ef5d36;
  --color-title: #fff;
  --perspective: 0px;
  --grid-width: 100%;
  --grid-max-width: 300px;
  --grid-item-ratio: 1.2;
  --grid-item-radius: 4px;
  --grid-gap: 2rem;
  --grid-columns: 2;
  --grid-columns-full: 7;
  --grid-rows-full: 5;
  --grid-item-translate: 0px;
  --grid-item-height: auto;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: "brisbane", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80vh 0 100vh 0;
  position: relative;
}

body::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--color-bg),
    transparent,
    var(--color-bg)
  );
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 99999;
}

.grid {
  /*padding: 0 100vh 0 0;*/
  width: var(--grid-width);
  max-width: var(--grid-max-width);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  position: relative;
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: 10vh;
}

.grid__item {
  margin: 0;
  position: relative;
  z-index: 1;
  perspective: 800px;
  will-change: transform, opacity;
}

.grid__item > .grid__item-img,
.grid__item-imgwrap {
  width: 100%;
  aspect-ratio: var(--grid-item-ratio);
  height: var(--grid-item-height);
  border-radius: var(--grid-item-radius);
  transform-style: preserve-3d;
}

.grid__item-imgwrap {
  position: relative;
  overflow: hidden;
  will-change: filter;
}

.grid__item:nth-child(odd) .grid__item-imgwrap {
  animation: appear 1s linear both;
  view-timeline: --subjectReveal block;
  animation-timeline:...