Is CSS used to create transparent box with text over background image? See example

See the example

Is CSS used to create this transparent white box with the text reading “Southern Company”, along with the logo over the image of the woman? It’s not on the image itself when I check. How is this done?

Thanks

It is an image. This is HTML code:

<div class="overlay">
  <img src="/dA/330f731b9d/logo/southern-company-logo-alt2.svg" alt="Southern Company logo">
</div>

Background of the .overlay is set to rgba(255,255,255,.5) - white with 50% opacity.

You can use developer tools to inspect the HTML and CSS code -> https://developers.google.com/web/tools/chrome-devtools/.

5 Likes

The image of the women is added using CSS background-image and not as a HTML img.

2 Likes

Hi @janneslohmeijer

Thank you for your reply. I’m trying to find out where you found the rgba in the code. I have some practice to do. :wink:

Thanks for your answer.