title: Display text when hovering an image on a gallery using flexbox html/css
body: <p>I'm trying to create an image gallery, and I want text to hover over the images using flexbox, but I am not sure how to achieve it. This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.gallery-links-h2{
    font-family: Catamaran;
    font-size: 28px;
    font-weight: 600;
    color: #111;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
  }
  
  
  .gallery-links {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  
  }
  
  
  .gallery-image-1 {
    flex-basis: 70%;
    margin: 10px;
  }
  
  
  .gallery-image-1 {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;main&gt;
    &lt;div class="wrapper"&gt;
     &lt;h2 class="gallery-links-h2"&gt; Gallery &lt;/h2&gt;
    &lt;/div&gt;
    
    &lt;section class="gallery-links"&gt;
  
          &lt;a href="#" class="gallery-image-1"&gt;
            &lt;img src="img/1.png"&gt;
          &lt;/a&gt;
  
    &lt;/section&gt;
  
   &lt;/main&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to add more images and make simple text appear when hovering the images, also i don't know how to add more images and apply the "flex configuration" to all of them and not just to only one. Would someone be so kind as to help me please Thank you everyone</p>