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

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>
``