Implementing Image Overlays in case of Multiple Images

Question

I tried to get an example from w3schools running, but in my case there are multiple images. The overlay is displayed for the entire window instead of the 1st image (I plan to do this for all images later).

Here is my code:

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

Possible duplicate of Overlay several images

Regolith
– Regolith

2017-07-23 08:30:48 +00:00
Commented Jul 23, 2017 at 8:30 — Regolith
– Regolith, Commented Jul 23, 2017 at 8:30

Chandra Shekhar · Accepted Answer · 2017-07-23 06:18:19Z

3

Add position:relative to .img1-wrap and give a try.

When you make a element positioned absolute, Make sure its parent is positioned relative

CSS

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

Is this what you want to achive Working Fiddle

Hope this helps..

edited Jul 23, 2017 at 6:18

answered Jul 23, 2017 at 6:11

Chandra Shekhar

3,7392 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naeem Ul Wahhab Over a year ago

Apart from the fact that this solution is accepted one but it only shows only one image the other images are hidden. Can you kindly do it while keeping the other images intact as they were before. thanks

Saurav Rastogi · Accepted Answer · 2017-07-23 06:16:21Z

It seems you are not using positioning the right way. Use relative for each element block with the text container.

You should restructure your HTML & CSS in such way:

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

Hope this helps and this is what you're trying to achieve.

Collectives™ on Stack Overflow

Implementing Image Overlays in case of Multiple Images

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related