title: How do I have a text when hover over a responsive column images?
body: <p>I have a responsive two-column gridded image gallery. I want to have a text display on each image when hovering over -basically, an opacity layer over the image with a centered text in the middle. This is what I've tried so far but the text does:</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>.row {
    display: -ms-flexbox; 
    display: flex;
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
    padding: 50px;
  }
  
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  
  .column_img {
    padding: 30px; 
    vertical-align: middle;
    width: 100%;
  }
  
  @media screen and (max-width: 1000px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }
  
  .img_text {
    position: absolute;
    background: rgba(185, 90, 90, 0.85);
    color: #222529;
    visibility: hidden;
    opacity: 0;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt; 
      &lt;div class="column"&gt;
              &lt;img class="column_img" src="https://via.placeholder.com/50" style="width:100%"&gt;
              &lt;p class="img_text"&gt;Image 01&lt;/p&gt;
              &lt;img class="column_img" src="https://via.placeholder.com/50" style="width:100%"&gt;
              &lt;p class="img_text"&gt;Image 02&lt;/p&gt;
  
      &lt;/div&gt;  
      &lt;div class="column"&gt;
              &lt;img class="column_img" src="https://via.placeholder.com/50" style="width:100%"&gt;
              &lt;p class="img_text"&gt;Image 03&lt;/p&gt;
              &lt;img class="column_img" src="https://via.placeholder.com/50" style="width:100%"&gt;
              &lt;p class="img_text"&gt;Image 04&lt;/p&gt;
      &lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>