Remove opacity on text [duplicate]

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
– G-Cyrillus, Commented Oct 19, 2020 at 10:03

Endunry · Accepted Answer · 2020-10-19 10:26:00Z

5

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>

edited Oct 19, 2020 at 10:26

answered Oct 19, 2020 at 10:04

Endunry

1,02010 silver badges20 bronze badges

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

1 Comment

KuldipKoradia Over a year ago

@John Higgins Perfect answer, This is the right way of use color with opacity.

Kaede · Accepted Answer · 2020-10-19 10:07:05Z

0

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;
}

answered Oct 19, 2020 at 10:07

Kaede

3082 silver badges12 bronze badges

Collectives™ on Stack Overflow

Remove opacity on text [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related