<div class="container">
<div class="row">
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-bullhorn"></span>
</div>
<h3><a href="#">Audit & Assurance</a></h3>
<div class="text">Your company will be able to take more risks once it has invested</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-bullhorn"></span>
</div>
<h4><a href="#">Audit & Assurance</a></h4>
<div class="overlay-text">Your company will be able to take more risks once it has invested</div>
</div>
</div>
</div>
</div>
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-bookmark-o"></span>
</div>
<h3><a href="#">Investment Planning</a></h3>
<div class="text">Your company will be able to take more risks once it has invested</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-bookmark-o"></span>
</div>
<h4><a href="#">Investment Planning</a></h4>
<div class="overlay-text">Your company will be able to take more risks once it has invested</div>
</div>
</div>
</div>
</div>
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-braille"></span>
</div>
<h3><a href="#">Marketing State</a></h3>
<div class="text">Your company will be able to take more risks once it has invested</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-braille"></span>
</div>
<h4><a href="#">Marketing State</a></h4>
<div class="overlay-text">Your company will be able to take more risks once it has invested</div>
</div>
</div>
</div>
</div>
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-paper-plane"></span>
</div>
<h3><a href="#">Strategic Planning</a></h3>
<div class="text">In publishing and graphic design, lorem ipsum is common placeholder text</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-paper-plane"></span>
</div>
<h4><a href="#">Strategic Planning</a></h4>
<div class="overlay-text">In publishing and graphic design, lorem ipsum is common placeholder text</div>
</div>
</div>
</div>
</div>
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-vcard"></span>
</div>
<h3><a href="#">Products Consulting</a></h3>
<div class="text">Your company will be able to take more risks once it has invested</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-vcard"></span>
</div>
<h4><a href="#">Products Consulting</a></h4>
<div class="overlay-text">Your company will be able to take more risks once it has invested</div>
</div>
</div>
</div>
</div>
<!--Services Block-->
<div class="services-block col-md-4 col-sm-6 col-xs-12">
<div class="inner-box">
<div class="icon-box">
<span class="fa fa-money"></span>
</div>
<h3><a href="#">Save Money</a></h3>
<div class="text">Your company will be able to take more risks once it has invested</div>
<div class="overlay-box" style="background-image:url(service-1.jpg)">
<div class="overlay-inner">
<div class="icon-box">
<span class="fa fa-money"></span>
</div>
<h4><a href="#">Save Money</a></h4>
<div class="overlay-text">Your company will be able to take more risks once it has invested</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
.services-block{
position:relative;
margin-bottom:30px;
}
.services-block .inner-box{
position:relative;
padding:35px 15px;
text-align:center;
border:2px solid #efefee;
}
.services-block .inner-box .icon-box{
position:relative;
font-size:60px;
color:#009dea;
line-height:1em;
margin-bottom:20px;
}
.services-block .inner-box h3{
position:relative;
color:#222222;
font-size:18px;
font-weight:600;
margin-bottom:15px;
}
.services-block .inner-box h3 a{
position:relative;
color:#222222;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.services-block .inner-box h3 a:hover{
color:#009dea;
}
.services-block .inner-box .text{
position:relative;
color:#888888;
font-size:14px;
line-height:1.8em;
}
.services-block .inner-box .overlay-box{
position:absolute;
content:'';
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0;
display:block;
text-align:center;
background-size:cover;
background-repeat:no-repeat;
-webkit-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
-webkit-transform: perspective(400px) rotateX(-90deg);
-moz-transform: perspective(400px) rotateX(-90deg);
-ms-transform: perspective(400px) rotateX(-90deg);
-o-transform: perspective(400px) rotateX(-90deg);
transform: perspective(400px) rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.services-block .inner-box:hover .overlay-box{
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
-o-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.services-block .inner-box .overlay-box .overlay-inner{
position:relative;
padding:35px 15px;
}
.services-block .inner-box .overlay-box:before{
position:absolute;
content:'';
left:0px;
top:0px;
width:100%;
height:100%;
display:block;
background-color:rgba(0,0,0,0.80);
}
.services-block .inner-box .overlay-box .overlay-inner{
position:relative;
}
.services-block .inner-box .overlay-box .overlay-inner h4{
position:relative;
color:#ffffff;
}
.services-block .inner-box .overlay-box .overlay-inner h4 a{
position:relative;
color:#ffffff;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.services-block .inner-box .overlay-box .overlay-inner .overlay-text{
position:relative;
color:#888888;
font-size:14px;
line-height:1.8em;
margin-top:10px;
}