Bootstrap img text hover

by Manabu Bannai

HTML

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 cover-img" style="background-image:url('https://manablog.org/wp-content/uploads/2016/11/top-img.jpg');">
			<div class="cover-text text-center">
				<p style="color: #fff;">ここがテキストですよ！！</p>
			</div>
		</div>
	</div>
</div>

CSS

.cover-img {
	height: 600px;
	display: table;
	width: 100%;
	background-size: cover;
}

/* ワイドスクリーン用のCSS */
@media only screen and (min-width: 1500px) {
	.cover-img {
		height: 800px;
	}
}

/* タブレット用のCSS */
@media only screen and (min-width : 768px) and (max-width : 1200px) {
	.cover-img {
		height: 500px;
	}
}

/* スマホ用のCSS */
@media only screen and (max-width: 479px) {
	.cover-img {
		height: 300px;
	}
}

.cover-text {
	display: table-cell;
	vertical-align: middle;
  text-align: center;
}