$FadingTextBlendMode

by mtambulut

HTML

<div class="wrapper">
  <div class="content">
    <h1>Fade away text</h1>

    <p>Hover over me to reveal the rest. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloremque facere quis, molestias dicta! Quidem ullam, dolore assumenda, iste laborum debitis inventore sequi magnam eos tempore recusandae laudantium dignissimos voluptates.Perferendis illo eius provident rem consequatur, sequi eos nulla sit nihil alias sapiente, dolorum natus laboriosam harum consectetur maxime facilis, ipsam commodi.</p>
  </div>
</div>

SCSS

p {
  color: #fff;
}
@supports (mix-blend-mode: screen) {
  p {
    mix-blend-mode: screen;
    position: relative;
  }
  p::after {
    background: -webkit-linear-gradient(top, transparent, #000 3rem) no-repeat bottom center/100% 100%;
    background: linear-gradient(180deg, transparent, #000 3rem) no-repeat bottom center/100% 100%;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
  }
  p:hover::after {
    background-size: 100% 0%;
  }
}

/* Pen styling */
.wrapper {
  background: #222 url(https://source.unsplash.com/yNGQ830uFB4/1600x900) 50% 50%/cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font: 18px/1.5 'Roboto', sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
  position: relative;
}
.wrapper::before {
  background: #222;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

h1 {
  font-size: 32px;
  font-weight: 300;
}

.content {
  color: #fff;
  max-width: 600px;
  text-align: center;
  position: relative;
}