1

I have a img with a black overlay. The overlay has an opacity and a white text within. When I hover the wrapper, a red overlay with a different opacity and text is visible. It works all fine. My only issue is, to remove the opacity on the text within the overlays. The text is white, but also transparent. How can I manage it, to put the text within a transparent container without transparent effect on the letters/text? I know, if I put the text out of this box and style it a in the center id would work. But I'd like to have the text element within the transparent container. Hope this is clear enough. Any ideas?

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: black;
  opacity: 0.4;
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Yoda</h2>
  </div>
  <div class="overlay overlay-red">
    <p>May the force be with you!</p>
  </div>
  <img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic">
</div>
webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
  • 1
    you could use an rgba colour for the background so you don't need to set opacity: eg `background:rgba(0,0,0,0.4)` would be a black black background with 0.4 opacity - more info: https://css-tricks.com/rgba-browser-support/ – Pete Nov 07 '17 at 10:40
  • @Pete perfekt, works fine - thanks! :) – webta.st.ic Nov 07 '17 at 10:41
  • You're welcome, glad I could help :) – Pete Nov 07 '17 at 10:43

1 Answers1

6

the key part is:

.overlay-black {
  background: rgba(0,0,0,0.4);
}

Please see below snippet I believe/hope this is what you expected.

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: rgba(0,0,0,0.4);
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Yoda</h2>
  </div>
  <div class="overlay overlay-red">
    <p>May the force be with you!</p>
  </div>
  <img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic">
</div>
Andrew Adam
  • 1,572
  • 9
  • 22