Bootstrap our Services Box with CSS3 Hover Effects

Our services box with CSS3 hover effects, It is created by using Bootstrap and font-awesome icons, which make it an easy and beautiful design.

HTML

<div class="our-services">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">Web Designing</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-code" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">Web Development</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-crop" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">Conversion Services</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-wordpress" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">WordPress Development</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-id-card-o" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">Logo & Identity Designs</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="service-box">
          <div class="row">
            <div class="col-3">
              <i class="fa fa-buysellads" aria-hidden="true"></i>
            </div>
            <div class="col-9">
              <h3><a href="#">Social Media & Ads Designs</a></h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text…</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.our-services {
    background-color: #00BCD4;
    padding: 70px 0px;
}
.service-box {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0px 15px;
    transition: 0.5s;
    border: 1px solid transparent;
}
.service-box:hover {
    background-color: #f9f9f9;
    border-radius: 40px;
    border: 1px solid #ddd;
}
.service-box:hover h3 a{
  color: #00bcd4;
}
.service-box i {
    font-size: 60px;
    align-items: center;
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    color: #989898;
}
.service-box h3 a {
    text-decoration: none;
    color: #FF9800;
    font-size: 24px;
}
.service-box :before {
    margin: 0 auto;
    display: block;
    float: none;
}