How do I make text in a flexbox hidden and then make it appear when the flexbox item is hovered over?

Question

I want the black text in the box (I choose Medellin) to be hidden but when I mouse over the actual grid item I want it to appear. How is this possible?

<main id="cards">
        <a href="signup.html"><section class="cards__med">
            <div class="cards__flexchild">
                <h1 class="cards__med-title">Medellín</h1>
                <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
                <h1 class="cards__texthead">The City of Eternal Spring</h1>
                
                <!-- <a href="signup.html" class="cards__med-btn">Choose City</a> -->
                <h1>I choose Medellín!</h1>
            </div>
        </section></a>
    
   #cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;

Answer 1

No problem :)

You'd want to avoid using multiple H1s on a page to maintain the document outline but you can simple use something such as:

// If you just want a simple hide / show .cards__med:not(:hover) .cards__med-btn { display:none; }

I'd also try to clean the HTML up a little bit if at all possible as there are multiple nested elements that will throw validation errors and multiple h1s:

<div href="signup.html" class="cards__med cards__flexchild">
      <h1 class="cards__med-title">Medellín</h1>
      <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
       <h2 class="cards__texthead">The City of Eternal Spring</h2>
                
       <a href="signup.html" class="cards__med-btn">Choose City</a>
</div>
``