Remove opacity on text

Question

I have the following code and have added opacity to the solid overlay colour. The problem is that the text is also using the opacity. How do I change it so that the text does not have the opacity and sits on top?

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  opacity: .5;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Thanks John

Do not use opacity, but an rgba() color for the background. Or `background-color: #008CBA80` — G-Cyrillus, Oct 19 '20 at 10:03

Raqha · Accepted Answer · 2020-10-19T10:26:00.013

Instead of opacity, use a RGBA color scheme

RGB: #RRGGBBAA, while A is alpha. you can also use rgba(r,g,b,a)

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA99; /* Instead of #008CBA */
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

@John Higgins Perfect answer, This is the right way of use color with opacity. — KuldipKoradia, Oct 19 '20 at 10:06

score 0 · Answer 2 · answered Oct 19 '20 at 10:07

I have had this problem before and i used ::before, I used it for images but i assume it also works for background colors CSS i used;

.style::before{
background-image: url(/images/bg_button.png);
  background-repeat: no-repeat;
  opacity: 0.15;
  width: 100%;
  height: 100%;

content: "";
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

Remove opacity on text

2 Answers2