.img-height {
    position: static;
    display: block;
}

.img-height:hover {
    background-color: #fff;
    opacity: 0.4;
    padding: 0;
    margin:0;
}

.img-container {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.img-text:hover h1 {
    color: #000;
    display: inline;
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
}

.img-8 {
    background: url(../images/img-8.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-9 {
    background: url(../images/img-9.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-10 {
    background: url(../images/img-10.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-text h1{
    display:none;
}

[HTML] pobierz, plaintext 
<div class="container-fluid text-center">
				<div class="row">
					<a href="">
						<div class="col-sm-4 img-height img-8 img-text">
							<div class="img-container">
								<h1>Bla</h1>
							</div>
						</div>
					</a>
					<a href="">
						<div class="col-sm-4 img-height img-9 img-text">
							<div class="img-container">
								<h1>Bla</h1>
							</div>
						</div>
					</a>
					<a href="">
						<div class="col-sm-4 img-height img-10 img-text">
							<div class="img-container">
								<h1>Bla</h1>
							</div>
						</div>
					</a>
				</div>
		</div>
[HTML] pobierz, plaintext