Bootstrap Hover div with text

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row table-row no-gutters hoverblur">
        <div class="col-md-3 col-sm-4 col-xs-6 col-ts-12">	<a href="#"><img src="http://placehold.it/560x420" alt="admissions image placeholder" /></a>

            <div  class="hover-content">
                <div class="table-center">
                    	<h4><a href="#">Our History</a></h4>

                    <p><a href="#">Professionally brand flexible ideas vis-a-vis installed base growth strategies. </a>

                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 col-ts-12">	<a href="#"><img src="http://placehold.it/560x420" alt="admissions image placeholder" /></a>

            <div  class="hover-content">
                <div class="table-center">
                    	<h4><a href="#">Our History</a></h4>

                    <p><a href="#">Professionally brand flexible ideas vis-a-vis installed base growth strategies. </a>

                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 col-ts-12">	<a href="#"><img src="http://placehold.it/560x420" alt="admissions image placeholder" /></a>

            <div   class="hover-content">
                <div class="table-center">
                    	<h4><a href="#">Our History</a></h4>

                    <p><a href="#">Professionally brand flexible ideas vis-a-vis installed base growth strategies. </a>

                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6 col-ts-12">	<a href="#"><img src="http://placehold.it/560x420" alt="admissions image placeholder" /></a>

            <div  class="hover-content">
                <div class="table-center">
                    	<h4><a href="#">Our History</a></h4>

                    <p><a...

CSS

/* http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/ */

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}
.row.table-row {
    display: table;
    width: 100%;
    margin: 0 auto;
}
.row.table-row >[class*="col-"] {
    clear: right !important;
    display: table-cell;
    vertical-align: middle;
}
@media (max-width: $screen-ts-max) {
    .row.table-row > .col-ts-12 {
        clear: none;
        float: left;
        width: 100%
    }
}
.hoverblur.row {
    position: relative;
}
.hoverblur.row > div:hover img {
    transition: .5s -webkit-filter linear;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
.hoverblur.row > div img {
    width: 100%;
    height: auto;
}
.hoverblur.row > div .hover-content {
    text-align: center;
    margin: 10% 10%;
/*    display: none; -- not working in jsfiddle */
    position: absolute;
    top: 0;
    left: 0;
    height: 75%;
    z-index: 3;
    filter: blur(0);
    -webkit-filter: blur(0);
    padding: 10px;
    vertical-align: middle;
}
.hoverblur.row > div:hover .hover-content {
    display: block;
    vertical-align: middle;
    ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
    zoom: 1;
    background-color: rgba(255, 255, 255, 0.90);
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.hoverblur.row > div:hover .hover-content:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
    /* For visualization 
  background: #808080; width: 5px;
 ...