<style>
/***------ Homepage Services ------***/
#services {
position: relative;
background: #fff;
padding: 60px 0;
}
#services a {
display: block;
}
.service-item {
text-align: center;
position: relative;
margin-bottom: 20px
}
.service-item svg {
fill: #ad172b;
position: relative;
height: 55px;
transform: translateY(-50%);
top: 50%;
z-index: 1;
}
#services .service-item {
background: #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
padding: 35px 10px;
overflow: hidden;
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
}
#services a:hover .service-item {
background: #ad172b
}
#services a .service-item span {
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
background: #ad172b;
}
.service-item img {
width: 55px;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#services a:hover .service-item img {
opacity: 0
}
#services a .service-item span:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #fff;
padding: 0;
border-radius: 50px;
z-index: 0;
width: 75px;
height: 75px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#services a:hover .service-item span:after {
width: 0;
height: 0
}
#services a .service-item span:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
background-image: none;
background-size: cover;
background-position: center 0;
background-repeat: no-repeat;
}
.service-item p.service-title {
margin: 0px auto 20px;
color: #6d6e70;
font-size: 18px;
line-height: 1.2;
text-transform: uppercase;
font-weight: 600;
-webkit-transition: color 300ms ease;
transition: color 300ms ease;
}
#services a:hover .service-item p.service-title {
color: #fff;
}
.service-cta {
text-align: center;
margin: 25px 0
}
.service-item .serv-description {
position: absolute;
top: 65%;
margin: 0px auto;
line-height: 1.3em;
width: 90%;
color: #fff;
padding: 0 10px;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#services a:hover .service-item .serv-description {
top: calc(50% + 10px);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 1;
z-index: 3;
}
@media screen and (max-width: 640px) {
p.serv-description {
font-size: 14px;
}
.service-item svg {
height: 40px;
}
#services a .service-item span:after {
width: 60px;
height: 60px;
}
#services a .service-item span {
width: 80px;
height: 80px;
}
#services a:hover .service-item .serv-description {
top: calc(50% + 20px);
}
}
</style>
<!-- -----------------------
--------- Services --------
---------------------------->
<div class="container" id="services">
<div class="row">
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
<div class="small-6 medium-4 columns">
<a href="/" title="Service in [territory], [major cities 3]">
<div class="service-item">
<p class="service-title">Service title</p>
<span><?php echo file_get_contents("http://d6449bb3dc657045bfc9-290115cc0d6de62a29c33db202ae565c.r80.cf1.rackcdn.com/142/waterproofing2.svg"); ?></span>
<p class="serv-description">A little happy sunlight shining through there. Make it special.</p>
</div>
</a>
</div>
</div>
</div>
<!-- /#services -->
Now you see it, now you don’t. Dazzle the senses with this amazing shrinking icon design.