Overlap image & text using CSS Grid

index.html

<body>
  <div class="container">
    <div class="grid-container">
      <div class="item-1">
        <h1 data-splitting="lines">Overlap image & text using CSS grid</h1>
      </div>
    
      <div class="item-2">
        <img src="https://images.pexels.com/photos/1029844/pexels-photo-1029844.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">

      </div>
      
    </div>
    <div class="grid-container">
      <div class="item-3">
        <h1 data-splitting="lines">Testing section 2</h1>
      </div>
      <div class="item-4">
        <img src="https://images.pexels.com/photos/1029844/pexels-photo-1029844.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">

      </div>
    </div>
  </div>
</body>

overlap-image-text-using-css-grid.markdown

Overlap image & text using CSS Grid

A responsive CSS Grid layout to display offset text over an image.

Image by Daria Shevtsova: https://www.pexels.com/photo/photo-of-person-holding-green-leaf-1029844/

A Pen by Marie Hekel on CodePen.

License.

script.babel

Splitting();

const options = {
  root: null, // use the document's viewport as the container
  rootMargin: "0px", // % or px - offsets added to each side of the intersection
  threshold: 0.2
};

const itemDelay = 0.1;

let fadeupCallback = (entries, self) => {
  let itemLoad = 0;
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
      tl.set(entry.target, { visibility: "visible" });
      tl.from(entry.target, {
        duration: 1.5,
        y: 200,
        skewY: 40,
        autoAlpha: 0,
        delay: itemLoad * itemDelay,
        ease: "power3.out"
      });
      itemLoad++;
      self.unobserve(entry.target);
    }
  });
};

let fadeupObserver = new IntersectionObserver(fadeupCallback, options);

document.querySelectorAll("h1 span, img").forEach((fadeup) => {
  fadeupObserver.observe(fadeup);
});

scripts

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>

style.scss

body {
  background: #d9b19a;
  padding: 40px 10vw;
}

.container {
  width: 60%;
  margin: auto;
  padding: 10px;
}
.grid-container {
  display: grid;
  grid-template: repeat(6, [row] 1fr) / repeat(12, [col] 1fr);
  grid-gap: 20px;
  max-width: 650px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 90vh;
}
.item-1,
.item-2 {
  align-items: center;
  justify-items: center;
  line-height: 1;
  color: white;
  display: flex;
}
.item-1 {
  grid-column: col 2 / span 7;
  grid-row: row 2 / span 4;
  z-index: 2;

  @media (max-width: 700px) {
    grid-column: col 2 / span 11;
    grid-row: row 1 / span 3;
  }
}

.item-2 {
  grid-column: col 5 / span 8;
  grid-row: row 1 / span 6;
  z-index: 1;

  @media (max-width: 700px) {
    grid-column: col 1 / 14;
    grid-row: row 2 / 7;
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
  visibility: hidden;
  max-height: calc(90vh - 40px);

  @media (max-width: 700px) {
    height: 100%;
    max-height: 100%;
  }
}

h1 {
  font-size: 3rem;
  font-family: termina, sans-serif;
  text-transform: lowercase;
  overflow: hidden;
  display: block;
  line-height: 1.1;

  span {
    visibility: hidden;
  }
}

styles

<link href="https://use.typekit.net/skn8ash.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />