.snip_hvr {
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    background: #000;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

    .snip_hvr * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .snip_hvr img {
        max-width: 100%;
        opacity: 1;
        width: 100%;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    .snip_hvr figcaption {
        position: absolute;
        bottom: 25%;
        left: 0;
        padding: 30px 3em;
        width: 100%;
    }

    .snip_hvr h2,
    .snip_hvr p {
        margin: 0 0 5px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
    }

    .snip_hvr h2 {
        font-size: 26px;
        font-weight: 500;
        -webkit-transform: translate3d(30%, 0%, 0);
        transform: translate3d(30%, 0%, 0);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

        .snip_hvr h2 span {
            font-weight: 500;
        }

    .snip_hvr p {
        font-weight: 200;
        -webkit-transform: translate3d(0%, 30%, 0);
        transform: translate3d(0%, 30%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .snip_hvr a {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        color: #ffffff;
    }

    .snip_hvr:hover img,
    .snip_hvr.hover img {
        opacity: 0.7;
    }

    .snip_hvr:hover figcaption h2,
    .snip_hvr.hover figcaption h2 {
        opacity: 1;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
    }

    .snip_hvr:hover figcaption p,
    .snip_hvr.hover figcaption p {
        opacity: 1;
        color: #fff;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
    }

    .snip_hvr:hover figcaption::before,
    .snip_hvr.hover figcaption::before {
        background: rgba(255, 255, 255, 0);
        left: 30px;
        opacity: 1;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

    .hovereffect .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .hovereffect img {
        display: block;
        position: relative;
        -webkit-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }

    .hovereffect:hover img {
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=""><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
        filter: grayscale(1) blur(3px);
        -webkit-filter: grayscale(1) blur(3px);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    .hovereffect h2 {
        text-align: center;
        position: relative;
        font-size: 18px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
    }

    .hovereffect a.info {
        display: inline-block;
        text-decoration: none;
        padding: 7px 14px;
        border: 1px solid #fff;
        margin: 100px 0 0 0;
        background-color: #122135;
    }

        .hovereffect a.info:hover {
            box-shadow: 0 0 5px #fff;
        }

    .hovereffect a.info, .hovereffect h2 {
        -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
        opacity: 0;
        filter: alpha(opacity=0);
        color: #fff;
    }

    .hovereffect:hover a.info, .hovereffect:hover h2 {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }