Adam Barker Adam Barker -3 years ago 65
CSS Question

Background of crossfade not responsive

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.

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.

jsfiddle:
https://jsfiddle.net/eL16s504/

html:

<center>
<div class="first-row bord crossfd">
<div class="column-left">
<img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" width="200px">
<h3 class="people-title">KEVIN BRYAN</h3>
<h3 class="second-title"><em>Interior Designer – Partner</em></h3>
</div>


<div class="column-center bord crossfd">
<img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" width="200px">
<h3 class="people-title">TOBY SCOTT</h3>
<h3 class="second-title"><em>Architect Director – Partner</em></h3>
</div>

<div class="column-right bord crossfd">
<img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
<h3 class="people-title">MURIEL MOORE</h3>
<h3 class="second-title"><em>Architect Manager – Partner</em></h3>
</div>
</div>
</center>

<center>
<div class="second-row">
<div class="column-left2 bord crossfd">
<img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
<h3 class="people-title">POK BENJAMIN</h3>
<h3 class="second-title"><em>Interior Manager – Partner</em></h3>
</div>

<div class="column-right2 bord crossfd">
<img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" width="200px">
<h3 class="people-title">POK BENJAMIN</h3>
<h3 class="second-title"><em>Interior Manager – Partner</em></h3>
</div>
</div>
</center>


css:

.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%; }

Answer Source

Background-size:contain - Scale the image to the largest size such that both its width and its height can fit inside the content area and position center will not help to centralise image in your structure.

have a look this structure,

.bord{
     
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
         display:block;
         }
.crossfd{
    background: url("http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/crossfade2.png");
     
       background-repeat : no-repeat;
       background-position
   background-size: cover;
     width:200px;
             }
.crossfd img{
               
                 width:200px;
               //  display:block;
                 -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;
                               }                        
                               
.center{
   margin:0 auto;
  
}                               

.column-3{ 
   
     width:33%; 
     display:table-cell;
    
     }
    
    .column-2{ 
   
     width:50%; 
     display:table-cell;
    
     }
     
<center>

    <!-- Row 1-->
    <div class="row">
        <div class="column-3">
           <div class="bord crossfd">
               <img src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" />
           </div>
            <h3 class="people-title">KEVIN BRYAN</h3>
            <h3 class="second-title"><em>Interior Designer – Partner</em></h3>
        </div>
        
        <div class="column-3">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" >
           </div>
           <h3 class="people-title">TOBY SCOTT</h3>
           <h3 class="second-title"><em>Architect Director – Partner</em></h3>
        </div>
        
         <div class="column-3">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team3.jpg" >
              </div>
            <h3 class="people-title">MURIEL MOORE</h3>
            <h3 class="second-title"><em>Architect Manager – Partner</em></h3>
        </div>
        
    </div>
    <!-- Row 2-->
   <div class="row">
        <div class="column-2">
           <div class="bord crossfd">
               <img src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team1.jpg" />
           </div>
            <h3 class="people-title">KEVIN BRYAN</h3>
            <h3 class="second-title"><em>Interior Designer – Partner</em></h3>
        </div>
        
        <div class="column-2">
           <div class="bord crossfd">
              <img class="our-people" src="http://loweconstruction.websitereboot.com.au/wp-content/uploads/2017/08/team2.jpg" >
           </div>
           <h3 class="people-title">TOBY SCOTT</h3>
           <h3 class="second-title"><em>Architect Director – Partner</em></h3>
        </div>
        
         
        
    </div>

</center>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download