Animacja pisania na maszynie(problem z background)

Witam robię animacje pisania na maszynie do swojej strony. Mam problem otóż w tle mam grafikę i jeżeli dam dla zasłaniania tekstu jakiś kolor brzydko to wygląda. Ktoś ma jakiś pomysł jak to zrobić ? Wrzucam https://codepen.io/anon/pen/NOVydg

<header>
        <div class="main-header">
            <div class="animation-wrap">
                <div class="first-h1">
                    <h1>Hello I'm</h1>
                </div>
                <div class="second-h1">
                    <h1>Rafał Brzeziński</h1>
                </div>
            </div>
        </div>
 </header> 

.main-header {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(36, 28, 122, 0.4),
        rgba(99, 82, 116, 0.2)),
        url(../images/bgc-header-rozmycie.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.animation-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    font-family: monospace;
}

.second-h1 h1 {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.second-h1 h1::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 3px solid black;
    animation: miganie .8s infinite linear, pisanie 4s steps(16, start);
}

/* KEYFRAMES */
@keyframes miganie {
    0% {
        border-color: transparent;
    }

    10% {
        border-color: transparent;
    }

    25% {
        border-color: black;
    }

    75% {
        border-color: black;
    }

    90% {
        border-color: transparent;
    }

    100% {
        border-color: transparent;
    }
}

@keyframes pisanie {
    100% {
        left: 100%;
    }
}

A może zamiast zasłaniać tekst po prostu go ukrywaj a po przejściu kursora pokazuj.