<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="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="service-block-two col-lg-4 col-md-6 col-sm-12"> <div class="inner-box"> <div class="shape-one"></div> <div class="shape-two"></div> <div class="icon-box"> <span class="icon flaticon-coding-1"></span> </div> <h5><a href="services-detail.html">Web Develpment</a></h5> <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> </div> </div> </div> </div>

.service-block-two { position: relative; z-index: 1; margin-bottom: 30px; } .service-block-two .inner-box { position: relative; overflow: hidden; padding: 45px 45px; border-radius: 6px; background-color: #f5f5f5; } .service-block-two .inner-box:before { position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%; height: 50%; opacity: 0; background-color: #141d38; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .service-block-two .inner-box .shape-one { content: ''; width: 250px; height: 250px; background: #0060ff; border-radius: 50%; position: absolute; top: -120px; opacity: 0.4; right: -120px; transform: scale(0); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .service-block-two .inner-box .shape-two { content: ''; width: 373px; height: 373px; background: #0060ff; border-radius: 50%; position: absolute; top: -180px; right: -180px; z-index: 1; opacity: 0; transform: scale(0); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .service-block-two .inner-box .icon-box { position: relative; font-size: 65px; line-height: 1em; color: #0060ff; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two .inner-box .icon-box { position: relative; z-index: 2; } .service-block-two .inner-box .icon-box { position: relative; font-size: 65px; line-height: 1em; color: #0060ff; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two .inner-box h5 { position: relative; z-index: 2; color: #222222; font-weight: 600; line-height: 1.3em; margin: 20px 0px 15px; } .service-block-two .inner-box .text { position: relative; color: #222222; z-index: 2; font-size: 16px; line-height: 1.8em; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .service-block-two .inner-box:hover::before { height: 100%; opacity: 1; } .service-block-two .inner-box:hover .shape-one { transform: scale(1); webkit-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; } .service-block-two .inner-box:hover .shape-two { opacity: 0.4; transform: scale(1); webkit-transition-delay: 600ms; -ms-transition-delay: 600ms; transition-delay: 600ms; } .service-block-two .inner-box:hover .icon-box, .service-block-two .inner-box:hover h5 a, .service-block-two .inner-box:hover .text { color: #ffffff; } .service-block-two .inner-box:hover .icon-box, .service-block-two .inner-box:hover h5 a, .service-block-two .inner-box:hover .text { color: #ffffff; } .service-block-two .inner-box:hover .icon-box, .service-block-two .inner-box:hover h5 a, .service-block-two .inner-box:hover .text { color: #ffffff; }