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

Question

我试图让example from w3schools运行，但在我的情况下，有多个图像。显示整个窗口的叠加而不是第一张图像（我计划稍后对所有图像执行此操作）。

这是我的代码：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

  

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

CSS

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

这是您想要获得的Working Fiddle

希望这会有所帮助..

Answer 2

您似乎没有以正确的方式使用定位。对文本容器的每个元素块使用relative。

你应该重组你的HTML＆amp; CSS以这种方式：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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