Busy Box

<style>
    /***------------------------------------------- Homepage Services -------------------------------------------***/

    #services {
        background: #fff;
        padding: 0 0px 40px;
    }

    .service-box {
        margin-bottom: 30px;
    }

    .service-box figure {
        margin: 0px;
    }

    .service-box figure img {
        width: 100%;
    }

    .service-box .service-text {
        border: 1px solid #efefef;
        padding: 20px;
        margin: -78px 10px 0px 10px;
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, .1);
        border-top: 0px;
        position: relative;
        z-index: 2;
        top: 0;
        transition: all 0.3s ease-in-out;
    }

    .service-box:hover .service-text {
        top: -10px;
        color: #fff;
        border: 1px solid #0075bd;
        box-shadow: 0 0 50px rgba(0, 0, 0, .35);
    }

    .service-text a {
        color: #1d4395;
    }

    .service-box:hover a {
        color: #fff;
        transition: .2s ease;
    }

    .service-box:hover a h3 {
        color: #fff;
        transition: .2s ease .3s;
    }

    .service-box .service-text h3 {
        line-height: 1.0;
        font-size: 1.1em;
        color: #1d4395;
        font-weight: bold;
    }

    .service-box .service-text p {
        font-size: .9rem;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .service-box .service-text:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        content: '';
        background: #1d4495;
        z-index: -1;
        transition: all 0.3s ease-in-out;
    }

    .service-box:hover .service-text:before {
        height: 100%;
    }

    .img-scale img {
        transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        width: 100%;
        transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -moz-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -webkit-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -o-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
    }

    .img-scale:hover img {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -moz-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -webkit-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
        -o-transition: all 2s cubic-bezier(0.23,
        1,
        0.32,
        1) 0s;
    }
</style>

<div class="container home" id="services">
    <div class="row">
        <div class="columns">
            <p class="home-section-title">Our Services in [territory]</p>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 large-3 columns">
            <div class="service-box img-scale">
                <figure><img src="https://placeimg.com/500/320/animals" alt=""></figure>
                <div class="service-text">
                    <a href="#!">
                        <h3>Service Title</h3>
                        <p>Lorem ipsum service title description goes here thanks bye.</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="medium-6 large-3 columns">
            <div class="service-box img-scale">
                <figure><img src="https://placeimg.com/500/320/tech" alt=""></figure>
                <div class="service-text">
                    <a href="#!">
                        <h3>Service Title</h3>
                        <p>Lorem ipsum service title description goes here thanks bye.</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="medium-6 large-3 columns">
            <div class="service-box img-scale">
                <figure><img src="https://placeimg.com/500/320/nature" alt=""></figure>
                <div class="service-text">
                    <a href="#!">
                        <h3>Service Title</h3>
                        <p>Lorem ipsum service title description goes here thanks bye.</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="medium-6 large-3 columns">
            <div class="service-box img-scale">
                <figure><img src="https://placeimg.com/500/320/people" alt=""></figure>
                <div class="service-text">
                    <a href="#!">
                        <h3>Service Title</h3>
                        <p>Lorem ipsum service title description goes here thanks bye.</p>
                    </a>
                </div>
            </div>
        </div>
    </div>