backround-fade on text-clip effect

.wrapper {
        position: relative;
        width: 100%;
        height: 300px;
      }

      .bg-image {
        opacity: 0.3;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("https://images.unsplash.com/photo-1548279105-7b357d835189?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80")
          no-repeat;
        background-position: center;
        background-size: cover;
      }

      .image-mask {
        background: url("https://images.unsplash.com/photo-1548279105-7b357d835189?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80")
          no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font: 700 60px "Open Sans", sans-serif;
      }

Or checkout codesandbox