title: Background of crossfade not responsive
body: <p>The plan is to crossfade the second image onto the top of the first. I've used this same code before, but this time it's wrecked. I've changed the margins and things only get worse.</p>
  
  <p>Could point me in the right direction as I'm a novice, I've tried changing various parameters so the problem is a lack of understanding, not a lack of trying to fix it. Problem seems to be with the backgrounds, but I've already added the code which makes backgrounds respond.</p>
  
  <p>jsfiddle:
  <a href="https://jsfiddle.net/eL16s504/" rel="nofollow noreferrer">https://jsfiddle.net/eL16s504/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;center&gt;
      &lt;div class="first-row bord crossfd"&gt;
          &lt;div class="column-left"&gt;
              &lt;img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" width="200px"&gt;
              &lt;h3 class="people-title"&gt;KEVIN BRYAN&lt;/h3&gt;
              &lt;h3 class="second-title"&gt;&lt;em&gt;Interior Designer – Partner&lt;/em&gt;&lt;/h3&gt;
          &lt;/div&gt;
  
  
          &lt;div class="column-center bord crossfd"&gt;
              &lt;img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" width="200px"&gt;
              &lt;h3 class="people-title"&gt;TOBY SCOTT&lt;/h3&gt;
              &lt;h3 class="second-title"&gt;&lt;em&gt;Architect Director – Partner&lt;/em&gt;&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="column-right bord crossfd"&gt;
              &lt;img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px"&gt;
              &lt;h3 class="people-title"&gt;MURIEL MOORE&lt;/h3&gt;
              &lt;h3 class="second-title"&gt;&lt;em&gt;Architect Manager – Partner&lt;/em&gt;&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  
  &lt;center&gt;
      &lt;div class="second-row"&gt;
          &lt;div class="column-left2 bord crossfd"&gt;
              &lt;img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px"&gt;
              &lt;h3 class="people-title"&gt;POK BENJAMIN&lt;/h3&gt;
              &lt;h3 class="second-title"&gt;&lt;em&gt;Interior Manager – Partner&lt;/em&gt;&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class="column-right2 bord crossfd"&gt;
              &lt;img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px"&gt;
              &lt;h3 class="people-title"&gt;POK BENJAMIN&lt;/h3&gt;
              &lt;h3 class="second-title"&gt;&lt;em&gt;Interior Manager – Partner&lt;/em&gt;&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.bord{
      -webkit-box-sizing: border-box;
  }
  
  .crossfd{
      background: url("http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/crossfade2.png");
      display: inline-block;
      font:size: 0;
      background-repeat:no-repeat;
      background-size:contain;
      background-position:center;
  }
  
  .crossfd img{
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
  }
  
  .crossfd img:hover{
      opacity: 0;
  }
  
  .first-row { margin-left: 150px; margin-right: 150px; }
  .second-row { margin-left: 270px; margin-right: 270px; }
  .column-left{ float: left; width: 33%; }
  .column-right{ float: right; width: 33%; }
  .column-center{ display: inline-block; width: 33%; }
  .column-left2 { float: left; width: 50%; }
  .column-right2{ float: right; width: 50%; }
  </code></pre>