p {
  color: #fff;
}
@supports (mix-blend-mode: screen) {
  p {
    mix-blend-mode: screen;
    position: relative;
  }
  p::after {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(3rem, #000)) 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://regmedia.co.uk/2017/03/07/shutterstock_cyber_spy_hacker.jpg?x=1200&y=794") 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;
}