Jump to content

Image Overlay Title


Recommended Posts

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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Posted (edited)

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

Edited by Eyesee
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...