<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <ul> <li class="wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;"> <div class="mob_posi"> <span><img src="https://www.csipl.net/outsource-web-design-development-company-india/images/Design_icon1.png" alt="strategy"></span> <p>Strategy<br> & Brand Identity</p> </div> </li> <li class="wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;"> <div class="mob_posi"> <span><img src="https://www.csipl.net/outsource-web-design-development-company-india/images/Design_icon2.png" alt="ui - ux design"></span> <p>UI/UX Design<br> and Development</p> </div> </li> <li class="wow fadeInDown" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInDown;"> <div class="mob_posi"> <span><img src="https://www.csipl.net/outsource-web-design-development-company-india/images/Design_icon3.png" alt="mobile app design"></span> <p>Mobile Apps Design & Development</p> </div> </li> <li class="wow fadeInDown" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInDown;"> <div class="mob_posi"> <span><img src="https://www.csipl.net/outsource-web-design-development-company-india/images/Design_icon4.png" alt="websites design - development"></span> <p>Websites Design<br> & Development</p> </div> </li> </ul> </div>

.container{ max-width:700px; } ul li { height: 280px; background: #FFFFFF; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); border-radius: 12px; float: left; margin-right: 5%; width: 45%; position: relative; margin-bottom: 5%; text-align: center; list-style:none; } .mob_posi { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } ul li span { width: 75px; height: 75px; border: 1px solid #CECECE; box-sizing: border-box; display: inline-block; border-radius: 50%; text-align: center; line-height: 75px; margin-bottom: 25px; position: relative; } ul li span:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; top: -2px; left: -2px; padding: 0; z-index: 10; border: 2px dashed #ed1b24; opacity: 0; } ul li p { font-size: 18px; line-height: 24px; color: #000; text-align: center; font-weight: 500; font-style: normal; margin-bottom: 22px; } ul li span i{ font-family:fontawesome; } ul li:hover span:after { -webkit-animation: spinAround 9s linear infinite; -moz-animation: spinAround 9s linear infinite; animation: spinAround 9s linear infinite; opacity: 1; }