1

I want to add an opacity background, with a visible text in front of an image. In my case I used flex to display the div elements, and I tried to create a background with opacity and also with text for each div. I know that I should use z-index to create background opacity layer, but in my case I don't know why it doesn't work.

main{ border: 2px solid red; width: 100%; height: 100vh; } .projects-wrapper{ border: 2px solid black; width: 100%; height: 50vh; display: flex; } .projects-wrapper div{ border: 2px solid green; flex-grow: 1; } /* .projects-wrapper div.text-description{ border: 2px solid yellow; font-family: 'Open Sans', sans-serif; font-size: 20px; color: white; text-transform: uppercase; } .projects-wrapper div.text-description span{ display: block; } */ .first-row div:first-child{ background-image: url(../assets/concert-hall.jpg); background-size: cover; background-position: center; } .first-row div:nth-child(2){ background-image: url(../assets/bedroom-2.jpg); background-size: cover; background-position: center; } .first-row div:last-child{ background-image: url(../assets/hotel.jpg); background-size: cover; background-position: center; }
 <main> <div class="projects-wrapper first-row"> <div class="image-wrapper"> <!-- <div class="text-description"> Concert hall <span>in New York</span> </div> <div class="text-category"> Architecture </div> --> </div> <div class="image-wpapper"> <!-- <div class="text-description"> Modern bedroom <span>in Gorizia</span> </div> <div class="text-category"> Interior </div> --> </div> <div class="image-wpapper"> <!-- <div class="text-description"> Modern hotel <span>in London</span> </div> <div class="text-category"> Architecture </div> --> </div> </div> <main>

Improve this question
0

3 Answers 3

Reset to default
0

Can you please check the below code? Hope it will work for you. We have given overlay background in class image-wrapper using ::after (pseudo-element). We have also wrapped text-description and text-category into div description and gave it position relative, z-index, and color. we have modified your style by assigning background image to direct child div. for example

.first-row div:first-child { background-image: url(); }

to

.first-row > div:first-child { background-image: url(); }

Please refer to this link: https://jsfiddle.net/yudizsolutions/mt4zpa8q/

main { border: 2px solid red; width: 100%; height: 100vh; } .projects-wrapper { border: 2px solid black; width: 100%; height: 50vh; display: flex; } .projects-wrapper div { flex-grow: 1; } .first-row>div:first-child { background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg); background-size: cover; background-position: center; } .first-row>div:nth-child(2) { background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg); background-size: cover; background-position: center; } .first-row>div:last-child { background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg); background-size: cover; background-position: center; } .image-wrapper { position: relative; } .image-wrapper:after { height: 100%; width: 100%; content: ''; position: absolute; top: 0; left: 0; display: block; background: rgba(0, 0, 0, 0.5); } .description { padding: 10px; position: relative; z-index: 1; color: #fff; } .text-description { margin: 10px 0px; }
<main> <div class="projects-wrapper first-row"> <div class="image-wrapper"> <div class="description"> <div class="text-description"> Concert hall <span>in New York</span> </div> <div class="text-category"> Architecture </div> </div> </div> <div class="image-wrapper"> <div class="description"> <div class="text-description"> Modern bedroom <span>in Gorizia</span> </div> <div class="text-category"> Interior </div> </div> </div> <div class="image-wrapper"> <div class="description"> <div class="text-description"> Modern hotel <span>in London</span> </div> <div class="text-category"> Architecture </div> </div> </div> </div> <main>

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

Comments

0

You're correct that you need to use z-index to force the text to display on top of the background. I don't see you using it in your code, but if you're having trouble remember that the elements you're trying to overlay with z-index must be adjacent inside the same parent element, and both elements must be positioned, otherwise it just won't work.

.container{ height: 200px; width: 200px; position: relative; } .container__background{ position: absolute; height: 100%; width: 100%; background: url("https://miro.medium.com/max/720/1*LjR0UrFB2a__5h1DWqzstA.png") no-repeat center; background-size: cover; opacity: .5; } .container__text{ height: 100%: width: 100%; position: relative; z-index: 100; padding: 20px; box-sizing: border-box; }
<div class="container"> <div class="container__background"></div> <div class="container__text">Put your text in here!</div> </div>

Improve this answer

Comments

0

You can use :after, :before CSS selectors. Also notice that in your HTML code you have misspell "image-wrapper" to "image-wpapper". Here is your probable solution.

https://codepen.io/Umesh8965/pen/xxRErxV

Hope this will your expectation.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.