title: Trying to fix a two column layout
body: <p>So I took the following two column layout from W3 schools, which will work for what I'm coding. The code is as follows: </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
    }
    /* Create two equal columns that floats next to each other */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        height: 300px; /* Should be removed. Only for demonstration */
    }
    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media (max-width: 600px) {
        .column {
            width: 100%;
        }
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;Responsive Two Column Layout&lt;/h2&gt;
    &lt;p&gt;Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).&lt;/p&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="column" style="background-color:#aaa;"&gt;
        &lt;h2&gt;Column 1&lt;/h2&gt;
        &lt;p&gt;Some text..&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="column" style="background-color:#bbb;"&gt;
        &lt;h2&gt;Column 2&lt;/h2&gt;
        &lt;p&gt;Some text..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And it works for what I need, the only thing is that I need to take the text outside of the columns and have the text blocks centered below each column so that it looks something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/rbF6p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rbF6p.jpg" alt="enter image description here"></a></p>
  
  <p>Also, I need the design to have one background image, and a separate image on hover, so that it changes when the cursor goes on top. </p>
  
  <p>Any help will be enormously appreciated.</p>