Image Overlay Title

[Eyesee]

The Image Overlay Title option has just the bottom area with text as per https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title

I would like to have the whole image overlaid with the black background, which happens if I add the height as being 100% in the .overlay{} as well as the width.

The only problem with this is the text jumps up to the top. How do I get the text to stay at the bottom please?

Thanks
Eyesee

[husyn]

Well, you can adjust the CSS for the overlay class and instead of positioning it absolutely at the bottom, you can use flexbox to vertically align the text to the bottom. Here's how you can modify the CSS:

 

.overlay {
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
}

 

With these adjustments, the text in the overlay will stay at the bottom of the image while covering the entire image with the black background.

[Eyesee]

Thanks husyn

That shows the background from the start, I wanted it to change to the black background when I hover over it.

It was getting the text to stay at the bottom I could not figure out.

Managed to get it to work though.

Again thanks
Eyesee

Edited May 1, 2024 by Eyesee

[dsonesuk]

For anyone else the default opacity: 0; of non hovered overlay is missing.