<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-4"> <div class="feature-box-wrap f-box-style-3 relative b-radius-5 pad-40"> <div class="feature-box-details"> <div class="feature-icon"> <span class="icon-briefcase"></span> </div> <div class="feature-content"> <div class="feature-title mb-3"> <h4 class="">Business Support</h4> </div> <p class="mb-0">Duis aute irure dolor in voluptate reprehenderit in velit esse.</p> </div> </div> </div> </div>

.feature-box-wrap.f-box-style-3 { border: solid 1px #e6e6e6; -webkit-box-shadow: 0 10px 50px -12px rgba(171,171,171,.9); -moz-box-shadow: 0 10px 50px -12px rgba(171,171,171,.9); -ms-box-shadow: 0 10px 50px -12px rgba(171,171,171,.9); -o-box-shadow: 0 10px 50px -12px rgba(171,171,171,.9); box-shadow: 0 10px 50px -12px rgba(171,171,171,.9); background: #fff; margin-bottom: 30px; } .f-box-style-3:hover:after { transform-origin: left; transform: scaleX(1); } .f-box-style-3::after { content: ''; position: absolute; bottom: 0; left: 0; height: 6px; width: 100%; transform-origin: right; transition: transform 500ms ease-in-out; -webkit-transition: transform 500ms ease-in-out; -moz-transition: transform 500ms ease-in-out; -o-transition: transform 500ms ease-in-out; transform: scaleX(0); border-bottom-left-radius: 30px; -webkit-bottom-left-radius: 30px; -moz-bottom-left-radius: 30px; border-bottom-right-radius: 30px; -webkit-bottom-right-radius: 30px; -moz-bottom-right-radius: 30px; } .f-box-style-3::after { background-color: #0060d6; } .f-box-style-3 .feature-icon { font-size: 38px; display: inline-block; line-height: 2.3; transition: all ease 0.35s; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; height: 76px; width: 76px; border: solid 1px #636363; margin-bottom: 24px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; text-align: center; } .feature-box-wrap.f-box-style-3:hover .feature-icon { color: #fff; border-color: transparent; } .feature-box-wrap.f-box-style-3:hover .feature-icon { background: -webkit-linear-gradient(-150deg, #3380de 35%, #0060d6 65%); background: linear-gradient(-150deg, #3380de 35%, #0060d6 65%); }