Overlay on hover Bootstrap Flexbox 5 columns

by Donna Torr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div id="team">
<div class="container-fluid g-0">
  <div class="row wrapper pl-0 pr-0 g-0">
    <div class="col-md-2 offset-md-1 col-sm-4 pl-0 pr-0 g-0 featured__item">
    <div class="img-wrap">
      <img src="https://tbli.sitewidedesign.co.uk/images/team/robert-team.webp" id="Team1" alt="Robert Rubinstein">
      </div>
      </div>
    <div class="col-md-2 col-sm-4 pl-0 pr-0 g-0 featured__item">
        <div class="img-wrap">
      <img src="https://tbli.sitewidedesign.co.uk/images/team/rieki-crins.webp" id="Team2" alt="Rieki Crins">
      </div>
    </div>
        <div class="col-md-2 col-sm-4 pl-0 pr-0 g-0 featured__item">
            <div class="img-wrap">
      <img src="https://tbli.sitewidedesign.co.uk/images/team/sam-rubinstein.webp" id="Team3" alt="Robert Rubinstein">
      </div>
      </div>
    <div class="col-md-2 col-sm-4 pl-0 pr-0 g-0 featured__item">
        <div class="img-wrap">
      <img src="https://tbli.sitewidedesign.co.uk/images/team/beata-dunn.webp" id="Team4" alt="Beata Dunn">
      </div>
    </div>
      <div class="col-md-2 col-sm-4 pl-0 pr-0 g-0 featured__item">
          <div class="img-wrap">
      <img src="https://tbli.sitewidedesign.co.uk/images/team/barbara-erskine.webp" id="Team5" alt="Barbara Erskine">
    </div>
  </div>
</div>
</div>
  
  <div class="container teambio">
    <div id="tr1">
      <h3>Robert Rubinstein</h3>
      <p>Chairman & Founding Partner</p>
      <div class="sppb-addon-content"><a...

CSS

#tr2, #tr3, #tr4, #tr5{
	display:none;
}
img {
  width: 100%;
}
p {
font-size:16px;
line-height:18px;
}
.wrapper {
  display: flex;
  flex-wrap: nowrap;
  margin-left:-10px;
  margin-top:-10px;
}
.featured__item {
  flex: 0 0 20%;  
}
.featured__content {
  background-color: #00DCD3;
  position: absolute;
  *top: 50%;
  bottom:0;
  z-index: 1;
  padding:20px;
}
.featured__item:hover .img-wrap, .featured__item {
  background-color: #00DCD3;
}
.featured__item:hover img {
    transition: background-color 600ms ease-in-out 0ms;
    opacity: 0.4;
}
.text-center {
  text-align: center;
}

@media only screen and (max-width:992px) {
  .wrapper {
    flex-wrap:wrap!important;
  }
}

JavaScript

$('#Team1').click(function() {
   $('#tr1').show();
   $('#tr2').hide();   
   $('#tr3').hide();   
   $('#tr4').hide();   
   $('#tr5').hide();
});

$('#Team2').click(function() {
   $('#tr1').hide();
   $('#tr2').show();   
   $('#tr3').hide();   
   $('#tr4').hide();   
   $('#tr5').hide();
});
$('#Team3').click(function() {
   $('#tr1').hide();
   $('#tr2').hide();   
   $('#tr3').show();   
   $('#tr4').hide();   
   $('#tr5').hide();
});
$('#Team4').click(function() {
   $('#tr1').hide();
   $('#tr2').hide();
   $('#tr3').hide();   
   $('#tr4').show();
   $('#tr5').hide();
});
$('#Team5').click(function() {
   $('#tr1').hide();
   $('#tr2').hide();
   $('#tr3').hide();   
   $('#tr4').hide();
   $('#tr5').show();
});