<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="how-it-work"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8 col-md-10"> <div class="section-heading text-center"> <h2 class="title"> Title Here </h2> </div> </div> </div> <div class="row justify-content-center"> <div class="col-lg-3 col-md-6"> <div class="box"> <div class="icon"> <i class="fa fa-search"></i> </div> <div class="content"> <h3>Search</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero voluptate eum recusandae numquam odio accusantium.</p> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="box"> <div class="icon"> <i class="fa fa-search"></i> </div> <div class="content"> <h3>Search</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero voluptate eum recusandae numquam odio accusantium.</p> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="box"> <div class="icon"> <i class="fa fa-search"></i> </div> <div class="content"> <h3>Search</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero voluptate eum recusandae numquam odio accusantium.</p> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="box"> <div class="icon"> <i class="fa fa-search"></i> </div> <div class="content"> <h3>Search</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero voluptate eum recusandae numquam odio accusantium.</p> </div> </div> </div> </div> </div> </section>

.container .box { position: relative; width: 100%; height: calc(300px - 30px); float: left; margin: 15px; box-sizing: border-box; overflow: hidden; border-radius:10px; } .container .box .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.5s; z-index: 1; } .container .box:hover .icon { top: 20px; left: calc(50% - 40px); /*80px/2*/ width: 80px; height: 80px; border-radius: 50%; } .container .box .icon .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; transition: 0.5s; color: #fff; } .box:hover .icon .fa { font-size: 40px; } .container .box .content { top: 100%; position: absolute; height: calc(100% - 100px); text-align: center; padding: 20px; box-sizing: border-box; transition: 0.5s; opacity: 0; } .container .box:hover .content { top: 100px; opacity: 1; } .container .box .content h3 { margin: 0 0 10px; padding: 0; color: #fff; font-size: 24px; } .container .box .content p { margin: 0; padding: 0; color: #fff; } .container .box:nth-child(1) .icon { background: #319635; } .container .box:nth-child(1) { background: #4caf50; } .container .box:nth-child(2) .icon { background: #d03852; } .container .box:nth-child(2) { background: #f54967; } .container .box:nth-child(3) .icon { background: #23798e; } .container .box:nth-child(3) { background: #328fa5; }