Bootstrap Flexbox 3 columns with box-shadow

Wi

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">
<div class="container">
  <div class="row wrapper">
    <div class="col-md-4 col-sm-12 pl-0 pr-0 featured__item">
      <img src="https://www.acceptrec.co.uk/images/registration-pic.webp">
      <div class="featured__content">
      <h3>Register</h3>
      <p>Choose a job you love from our wide range of vacancies. From warehouse roles to driving jobs, you are sure to find the perfect one for you!</p>
      <p><a href="#" class="hp-button btn">LEARN MORE</a></p>
      </div>

    </div>
    <div class="col-md-4 col-sm-12 pl-0 pr-0 featured__item">
      <img src="https://www.acceptrec.co.uk/images/candidates.webp">
      <div class="featured__content">
      <h3>Candidates</h3>
      <p>With over 750+ reviews we are the highest-rated agency in the UK, so you know that we will go above and beyond to help you!</p>
      <p><a href="#" class="hp-button btn">LEARN MORE</a></p></div>
 
    </div>
    <div class="col-md-4 col-sm-12 pl-0 pr-0 featured__item">
      <img src="https://www.acceptrec.co.uk/images/employers .webp">
      <div class="featured__content">
           <h3>Clients</h3>
      <p>We offer a range of services tailored to your need, so please get in touch with one of our professional team.<br /><br /></p>
      <p><a href="#" class="hp-button btn">LEARN MORE</a></p>
      </div>
      </div>
  </div>
</div>

CSS

img {
  width: 100%;
}
p {
font-size:16px;
line-height:18px;
}
.wrapper {
  display: flex;
  flex-wrap: nowrap;
  margin-left:-10px;
  margin-top:-10px;
  padding-top:50px;
}
.featured__item {
  flex: 0 0 auto;  
  margin:10px 5px;
    box-shadow: 5px 10px rgba();
}
.featured__content {
  background-color: #fff;
  position: absolute;
  *top: 50%;
  bottom: 0;
  z-index: 1;
  padding: 20px;
    *border:1px solid;
}
.featured__content:hover {
   transition: background-color 600ms ease-in-out 0ms;
   *opacity: 0.4;
   background-color:rgba(255,255,255,0.4);
}
.text-center {
  text-align: center;
}
.hp-button {
  background:#312252;
  padding: 15px 47px;
  color:#ffffff;
}

/* Hover effects */

.featured__content:hover p, .featured__content:hover h3 {
  transition: color 600ms ease-in-out 0ms;
  color:#fff;
  opacity:1;
}

.featured__content:hover .hp-button {
  background:transparent;
  transition: color 600ms ease-in-out 0ms;
  border:3px solid; 
  color:#ffffff;
}
@media only screen and (max-width:768px) {
  .wrapper {
    flex-wrap:wrap!important;
  }
}