Eyesee Posted April 30 Share Posted April 30 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 Link to comment Share on other sites More sharing options...
husyn Posted April 30 Share Posted April 30 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 More sharing options...
Eyesee Posted May 1 Author Share Posted May 1 (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 Eyesee Edited May 1 by Eyesee Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now