Shrinky Dink

<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 -->