Figueroa Card Flip

<style>
    #services {
        position: relative;
        background: #e0e0e0;
        padding: 0;
    }

    #services:before {
        content: "";
        display: block;
        background: url(/core/images/templates/bambam/images/dot-matrix-35.png);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #services .row {
        padding: 60px 0px;
    }

    .text-content .extras a {
        color: rgba(255,
        255,
        255,
        0.5);
        text-decoration: none;
        text-transform: uppercase;
        -webkit-transition: color 300ms ease-in-out;
        transition: color 300ms ease-in-out;
    }

    .text-content .extras a:hover {
        color: rgb(255,
        242,
        0);
    }

    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .effects .fa {
        font-size: 1.25em;
        padding: 3px;
        margin: 4px;
    }

    .effects {
        display: inline-block;
        position: relative;
        max-width: 100%;
        -webkit-transform: translate3d(0,
        0,
        0);
        transform: translate3d(0,
        0,
        0);
    }

    .effects .effects-wrap {
        display: block;
        position: relative;
        overflow: hidden;
        width: auto;
        max-width: 100%;
        height: auto;
        float: left;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .effects.round {
        border-radius: 50%;
    }

    .img-wrap,
    .img-wrap:after,
    .img-wrap:before,
    .content-box,
    .content-box:after,
    .content-box:before,
    .text-content,
    .effects-wrap {
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .img-wrap:after,
    .img-wrap:before,
    .content-box,
    .content-box:after,
    .content-box:before {
        background: rgba(0,
        0,
        0,
        0.5);
    }

    .img-wrap,
    .content-box {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        float: left;
        -webkit-transform: scale(1,
        1);
        transform: scale(1,
        1);
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: visible;
        backface-visibility: hidden;
    }

    .img-wrap img,
    .content-box img {
        display: block;
        position: relative;
        width: 100%;
        max-height: 100%;
        max-width: 600px;
        height: auto;
    }

    .content-box {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .content-box .text-content {
        display: block;
        position: relative;
        padding: 10%;
    }

    .text-content h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #fff;
    }

    .text-content hr {
        margin: .875rem 0;
    }

    .text-content p {
        line-height: 1.6;
        margin-bottom: 1rem;
        color: #fff;
    }

    .extras a {
        font-size: 1rem;
    }

    .flip {
        overflow: visible;
        -webkit-perspective: 1200px;
        perspective: 1200px;
        z-index: 2;
        margin-bottom: 25px;
    }

    .flip .effects-wrap {
        overflow: visible !important;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .flip .img-wrap,
    .flip .content-box {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .flip .img-wrap {
        z-index: 0;
    }

    .img-wrap h3 {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,
        -50%);
        transform: translate(-50%,
        -50%);
        width: 90%;
        text-align: center;
        background: rgba(255,
        242,
        0,
        0.8);
        color: #1f1f1f;
        font-size: 1.5rem;
        font-weight: 400;
        font-style: italic;
        margin: 0;
        padding: 5px;
    }

    .flip.top .content-box {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        -180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        -180deg);
    }

    .flip.top:hover .effects-wrap {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        -180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        -180deg);
    }

    .flip.bottom .content-box {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        180deg);
    }

    .flip.bottom:hover .effects-wrap {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(1,
        0,
        0,
        180deg);
    }

    .flip.left .content-box {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        180deg);
    }

    .flip.left:hover .effects-wrap {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        180deg);
    }

    .flip.right .content-box {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        -180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        -180deg);
    }

    .flip.right:hover .effects-wrap {
        -webkit-transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        -180deg);
        transform: translate3d(0,
        0,
        0) rotate3d(0,
        1,
        0,
        -180deg);
    }

    @media screen and (-ms-high-contrast:active),
    (-ms-high-contrast:none) {
        .effects {
            -webkit-transform: none;
            transform: none;
        }
        .flip .effects-wrap {
            overflow: visible !important;
            -webkit-transform-style: none;
            transform-style: none;
        }
        .flip:hover .effects-wrap {
            -webkit-transform: translate3d(0,
            0,
            0) rotate3d(1,
            0,
            0,
            -180deg);
            transform: translate3d(0,
            0,
            0) rotate3d(1,
            0,
            0,
            -180deg);
        }
        .flip.top .content-box {
            -webkit-transform: none;
            transform: none;
        }
        .content-box .text-content {
            -webkit-transform: translate3d(0,
            0,
            0) rotate3d(1,
            0,
            0,
            -180deg);
            transform: translate3d(0,
            0,
            0) rotate3d(1,
            0,
            0,
            -180deg);
            opacity: 0;
        }
        .flip.effects:hover .content-box .text-content {
            opacity: 1;
        }
    }

    @media screen and (min-width:641px) and (max-width:1024px) {
        .flip .img-wrap {
            overflow: hidden;
        }
        .img-wrap img,
        .content-box img {
            width: auto;
            min-height: 300px;
        }
        .text-content p {
            line-height: 1.4;
        }
    }

    @media screen and (max-width:641px) {
        .flip .img-wrap {
            max-height: 240px;
            overflow: hidden;
        }
        .img-wrap img,
        .content-box img {
            height: auto;
            width: auto;
            min-height: 200px;
        }
    }
</style>

<div class="container" id="services">
    <div class="row">
        <div class="columns medium-5 medium-offset-1">
            <div class="flip effects top">
                <div class="effects-wrap">
                    <div class="content-box">
                        <div class="text-content">
                            <h3>Service</h3>
                            <hr>
                            <p>Sugar plum gummies dessert cheesecake tootsie roll pastry.</p>
                            <hr>
                            <div class="extras">
                                <a href="#" target="_blank">Learn More<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="img-wrap">
                        <h3>Service Title</h3>
                        <img alt="Service Alt" src="https://images.pexels.com/photos/9095/pexels-photo.jpg"></div>
                </div>
            </div>
        </div>
        <div class="columns medium-5">
            <div class="flip effects top">
                <div class="effects-wrap">
                    <div class="content-box">
                        <div class="text-content">
                            <h3>Service</h3>
                            <hr>
                            <p>Cupcake ipsum dolor sit amet donut liquorice biscuit.</p>
                            <hr>
                            <div class="extras">
                                <a href="#" target="_blank">Learn More<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="img-wrap">
                        <h3>Service Title</h3>
                        <img alt="Service Alt" src="https://images.pexels.com/photos/9095/pexels-photo.jpg"></div>
                </div>
            </div>
        </div>
        <div class="columns medium-5 medium-offset-1">
            <div class="flip effects top">
                <div class="effects-wrap">
                    <div class="content-box">
                        <div class="text-content">
                            <h3>Service</h3>
                            <hr>
                            <p>Sweet roll tootsie roll jujubes candy. Pie sweet jelly.</p>
                            <hr>
                            <div class="extras">
                                <a href="#" target="_blank">Learn More<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="img-wrap">
                        <h3>Service Title</h3>
                        <img alt="Service Alt" src="https://images.pexels.com/photos/9095/pexels-photo.jpg"></div>
                </div>
            </div>
        </div>
        <div class="columns medium-5 end">
            <div class="flip effects top">
                <div class="effects-wrap">
                    <div class="content-box">
                        <div class="text-content">
                            <h3>Service</h3>
                            <hr>
                            <p>Brownie cheesecake gingerbread lemon drops cupcake muffin.</p>
                            <hr>
                            <div class="extras">
                                <a href="#" target="_blank">Learn More<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="img-wrap">
                        <h3>Service Title</h3>
                        <img alt="Service Alt" src="https://images.pexels.com/photos/9095/pexels-photo.jpg"></div>
                </div>
            </div>
        </div>
    </div>
</div>