如何制作<a> tag show within a hover overlay

Question

first of all I'm almost entirely new to coding and this website, also english is not my mother tongue so please be kind :)

My problem is that I have an image overlay on hover that contains an anchor element. I did not succeed in making the anchor element show up together with the overlay div. My approach was to use a sibling selector that tells the anchor to show when I hover the overlay div.

Hope you guys can help :)

   .overlay {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 98.5%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: all 0.2s ease-in-out;
    background-color: rgba(112, 153, 159, 0.0);
    }

    .overlay a {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.0);
    }

    .overlay:hover {
    background-color: rgba(112, 153, 159, 0.8);
    }

    .overlay:hover ~ .overlay a{
    color: rgba(255, 255, 255, 1);
    }

    <div class="portfolio1">
     <img class="portfolio-image" src="/img/platzhalter.png" />
     <div class="overlay">
      <a>Illustration</a>
     </div>
    </div>