<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-puzzle-piece" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>Pixel Perfect Design</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-arrows" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>Retina Ready</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>Image Parralax</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>Ease Customizable</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-sitemap" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>Seo Optimized</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="icon-wrapper">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="content-wrapper">
<p>24/7 Support</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, magni.</p>
</div>
</div>
</div>
</div>
body {
padding: 0;
margin: 0;
}
.container {
max-width: 1000px;
margin: 48px auto;
font-family: "Roboto";
}
.container .outer-wrapper {
float: left;
width: 50%;
height: 180px;
position: relative;
background: #efefef;
}
.container .outer-wrapper:before {
position: absolute;
display: block;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: linear-gradient(90deg, #efefef, #cfcfcf, #efefef);
content: "";
z-index: 45;
}
.container .outer-wrapper:nth-child(odd):after {
display: block;
position: absolute;
width: 2px;
height: 90%;
background: linear-gradient(#efefef, #cfcfcf, #efefef);
top: 50%;
transform: translate(-50%, -50%);
right: 0;
content: "";
z-index: 40;
}
.container .outer-wrapper:hover:after, .container .outer-wrapper:hover:before {
display: none;
}
.container .outer-wrapper:hover .inner-wrapper {
background: linear-gradient(#8eba2f 10%, #44c125 70%);
width: 105%;
height: 110%;
z-index: 50;
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.27);
color: #fff;
}
.container .outer-wrapper .inner-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: #efefef;
overflow: hidden;
z-index: 40;
color: #505050;
font-size: 24px;
text-align: center;
box-shadow: 0px 0px 0px transparent;
display: flex;
align-items: center;
cursor: pointer;
}
.container .outer-wrapper .inner-wrapper .icon-wrapper {
width: 50%;
text-align: center;
}
.container .outer-wrapper .inner-wrapper .icon-wrapper i {
font-size: 48px;
}
.container .outer-wrapper .inner-wrapper .content-wrapper {
text-align: left;
padding: 5px;
}
.container .outer-wrapper .inner-wrapper .content-wrapper p {
margin: 0;
}
.container .outer-wrapper .inner-wrapper .content-wrapper p:first-child {
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
}
.container .outer-wrapper .inner-wrapper .content-wrapper p:last-child {
font-size: 16px;
font-style: italic;
}
