div.wrap

  - for (var x = 0; x < 3; x++)
    div.clip-content
      div.clip-content__wraper
        div.clip-content__img
      div.clip-content__detail
        h2.clip-content__title headline
View Compiled
$images: (
  '1': "https://images.unsplash.com/photo-1562887245-f2d5024f6134?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2389&q=80",
  '2': "https://images.unsplash.com/photo-1533292627361-78042570e3bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
  '3': "https://images.unsplash.com/photo-1587147334659-edd7f0819a80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80",
);

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.clip-content {
    position: relative;
  
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) .clip-content__img {
      background-image: url(map-get($images, #{$i}));
      background-size: cover;
      background-position: center center;
    }
  }
  
  &__wraper {
  width: 100%;
  overflow: hidden;
  transform: scale(1.4) rotate(10deg);
  }
  
  &__img {
    height: 700px;
    width: 100%;
    padding: 5rem;
    box-sizing: border-box;
    transform: scale(1.4) rotate(-10deg);
  }
  
  &__detail {
    width: 100%;
    padding: 3rem;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
  }
  
  &__title {
    width: 100%;
    margin: 0;
    font-size: 7vw;
    color: white;
    text-align: center;
    font-family: 'Courgette', cursive;
  }
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.