BTEC IT 第 20 单元——网站设计/CSS/悬停图像

将文本放置在悬停图像上
<head>
<style>
.hover_box,
.hover_box * {
	box-sizing: border-box;
}
.hover_box {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.hover_box img {
	max-width: 100%;
}
.hover_box .hover_box-layer_bottom {
	display: block;
}
.hover_box .hover_box-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	transition: all 0.4s ease-in-out 0s;
}
.hover_box:hover .hover_box-layer_top,
.hover_box.active .hover_box-layer_top {
	opacity: 1;
}
.hover_box .hover_box-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="hover_box">
	<img src="hawaii.jpg" alt="Mountains" class="hover_box-layer_bottom">
	<div class="hover_box-layer_top">
		<div class="hover_box-text"> This is a picture of Hawaii</div>
	</div>
</div>

</body>