<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="strt-up-box"> <ul> <li> <a href=""> <span class="outer"> <span class="icon"><i class="fb fa-envelope-o"></i></span> <span class="title">A Life Worth Living</span> <span class="data">who struggle with Anxiety, Depression, or Fatigue and look for ways to heal naturally</span> </span> </a> </li> <li> <a href=""> <span class="outer"> <span class="icon"><i class="fa fa-envelope-o"></i></span> <span class="title">A Life Worth Living</span> <span class="data">who struggle with Anxiety, Depression, or Fatigue and look for ways to heal naturally</span> </span> </a> </li> <li> <a href=""> <span class="outer"> <span class="icon"><i class="fa fa-envelope-o"></i></span> <span class="title">A Life Worth Living</span> <span class="data">who struggle with Anxiety, Depression, or Fatigue and look for ways to heal naturally</span> </span> </a> </li> </ul> </div> </div> </div>

.strt-up-box { padding: 0 25px; margin-bottom: 40px; } .strt-up-box ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 -20px; list-style-type: none; } .strt-up-box ul li { padding: 0 20px; -webkit-flex: 0 0 20%; -moz-flex: 0 0 20%; -ms-flex: 0 0 20%; -o-flex: 0 0 20%; flex: 0 0 20%; } .strt-up-box ul li a { display: block; border-width: 1px; border-color: rgb(33, 136, 186); border-style: dashed; border-radius: 6px; padding: 4px; } .strt-up-box ul li a span.outer { display: block; border-radius: 6px; background-color: rgb(255, 255, 255); text-align: center; padding: 20px; height: 215px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; overflow: hidden; } .strt-up-box ul li a span.outer span { display: block; } .strt-up-box ul li a span.outer span.icon { height: 130px; line-height: 130px; font-size: 65px; color: #0996d3; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 1; } .strt-up-box ul li a span.outer span.title { font-size: 20px; color: rgb(51, 51, 51); line-height: 25px; font-weight: 300; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity: 1; } .strt-up-box ul li a span.outer span.data { line-height: 0px; height: 0; font-weight: 300; overflow: hidden; color: #fff; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 0; } .strt-up-box ul li a:hover span.outer { background-color: #0996d3; } .strt-up-box ul li a:hover span.outer span.icon { color: #fff; height: 0; line-height: 0px; font-size: 0; overflow: hidden; opacity: 0; } .strt-up-box ul li a:hover span.outer span.title { font-weight: 600; color: #fff; height: 80px; line-height: 80px; } .strt-up-box ul li a span.outer span.data { font-size: 18px; color: #fff; opacity: 1; height: auto; line-height: 22px; }