Bootstrap responsive cards -image hover

A Bootstrap card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options. Bootstrap cards replace old Bootstrap panels, Bootstrap wells, and Bootstrap thumbnails.

     <section id="single-services" class="single-services">
      <div class="container">

        <div class="row">
          <div class="col-lg-12 d-flex align-items-stretch">
            <div class="d-flex flex-column justify-content-center">
              <div class="row">
                <div class="col-xl-4 d-flex align-items-stretch">
                  <div class="single-services-box b1 icon-box mt-4 mt-xl-0">

                    <h4>Case Management</h4>
                    <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,</p>
                  <div class="text-center">
              </div>
                  </div>
                </div>


              </div>
            </div><!-- End .content-->
          </div>
        </div>

      </div>
    </section>(code-box)

.single-services{
background-color: #000;
}

.icon-box {
text-align: center;
border-radius: 10px;
box-shadow: 0px 2px 15px rgba(255, 255, 255, 0.22);
padding: 40px 30px;
width: 100%;
color: #fff;
}
.single-services-box::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #19ce67;
    z-index: -1;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}

.single-services-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #181a20;
    z-index: -1;
    -webkit-transition: .5s;
    transition: .5s;
}

.single-services-box{  
position: relative;
padding: 40px 38px;
z-index: 1;
overflow: hidden;
-webkit-transition: .5s;
transition: .5s;

}
.b1{
    background: url("../img/b1.jpg") center center no-repeat;
    background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.b2{
    background: url("../img/b2.jpg") center center no-repeat;
    background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}


.b3{
    background: url("../img/b3.jpg") center center no-repeat;
    background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.single-services-box:hover::before {
   background-color: #4b94cf;
   color: #fff;
    opacity: .8;
}(code-box)