在多个图像的情况下实现图像叠加

Question

我试图从w3schools运行中获取一个示例，但就我而言，有多个图像。叠加层显示在整个窗口而不是第一个图像(我计划稍后对所有图像执行此操作(。

这是我的代码：

.flex-container {
	display: flex;
}
.col1 {
	position: relative;
	display: block;
}
.img1-wrap {
	display: block;
}
.image {
	display: block;
	/*width: 100%;*/
	height: auto;
}
.overlay {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #008CBA;
	overflow: hidden;
	/*width: 100%;*/
	height: 20%;
	transition: .5s ease;
}
.img1-wrap:hover .overlay {
	height: 100%;
}
.text {
	white-space: nowrap; 
	color: white;
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

<div class="flex-container">
	<div class="col col-1">
		<div class="img1-wrap">
			<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
			<div class="overlay">
				<div class="text">Hello World</div>
			</div>
		</div>
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2">
	</div>
	
	<div class="col col-3">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4">
	</div>
</div>

Answer 1

将position:relative添加到.img1-wrap并尝试一下。

当您将元素定位为绝对时，请确保其父元素 定位相对

.CSS

.img1-wrap {
display: block;
position: relative;
}

这就是你想要实现的吗 工作小提琴

希望这有帮助..

Answer 2

看来你没有以正确的方式使用定位。对带有文本容器的每个元素块使用relative。

你应该以这样的方式重组你的HTML和CSS：

.flex-container {
	position: relative;
	display: flex;
}
.img1-wrap {
	position: relative;
	overflow: hidden;
	width: 200px;
}
.image {
	width: 100%;
}
.overlay {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #008CBA;
	overflow: hidden;
	/*width: 100%;*/
	height: 20%;
	transition: .5s ease;
}
.img1-wrap:hover .overlay {
	height: 100%;
}
.text {
	white-space: nowrap; 
	color: white;
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

<div class="flex-container">
	<div class="img1-wrap">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
		<div class="overlay">
			<div class="text">Hello World</div>
		</div>
	</div>
	<div class="img1-wrap">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
		<div class="overlay">
			<div class="text">Hello World</div>
		</div>
	</div>
	<div class="img1-wrap">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
		<div class="overlay">
			<div class="text">Hello World</div>
		</div>
	</div>
	<div class="img1-wrap">
		<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
		<div class="overlay">
			<div class="text">Hello World</div>
		</div>
	</div>
</div>

希望这有所帮助，这就是您要实现的目标。