<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="//code.jquery.com/jquery-1.11.1.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"> <div class="container"> <div class="box"> <div class="icon"> <i class="fa fa-search" aria-hidden="true"></i> </div> <div class="content"> <h3>Search</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> </div> </div> <div class="box"><div class="icon"> <i class="fa fa-user" aria-hidden="true"></i> </div> <div class="content"> <h3>User</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> </div></div> <div class="box"><div class="icon"> <i class="fa fa-map-marker" aria-hidden="true"></i> </div> <div class="content"> <h3>Location</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> </div></div> </div>

body { margin:0; padding:0; font-family:sans-serif; } .container { position:relative; width:1200px; height:300px; margin:100px auto; background:#000; } .container .box { position:relative; width:calc(400px - 60px); height:calc(300px - 60px); background:#000; 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%; background:#f00; transition:0.5s; z-index:1; } .container .box:hover .icon { top:20px; left:calc(50% - 40px); 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; } .container .box:hover .icon .fa { font-size:40px; } .container .box .content { position:absolute; top:100%; height:calc(100% - 100px); text-align:center; padding:20px; box-sizing:border-box; transition:.5s; } .container .box:hover .content { top:100px; } .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; }