CODEWITHSUNDEEP
htmlcss
Miguel Ferreira
Miguel Ferreira

Reputation: 45

Text showing with opacity

I am making an animated wave loading page, and my loader and loading text when are outside the wave wrapper div don't appear,but if I put them inside the div they appear but show as like they have an opacity filter on them, and I cant select or drag the text with the mouse. Any help?

<div class="waveWrapper waveAnimation">
    
    <div class="centered"><div class="loader"></div></div>
    
  <div class="waveWrapperInner bgMiddle">
    <div class="centered"><div class="loader"></div></div>
    <div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
    <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
  </div>
    
  <div class="waveWrapperInner bgBottom">
    <div class="centered"><div class="loader"></div></div>
    <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
  </div>
</div>

.centered{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}

Upvotes: 0

Views: 47

Answers (1)

salyangoz
salyangoz

Reputation: 111

Your loader is using the .centered class which has the z-index of -1, whilst your .bgMiddle class has the z-index of 10.

Since your .centered div is behind the .bgMiddle div according to its z-index, you can't see it when it's outside of the .bgMiddle div.

If you change your .centered class's z-index to be bigger than 10, you should be able to see it.

P.S. The reason you see the opacity filter effect when you put them in the div is because the .bgMiddle class is set to have an opacity of 0.75 in your stylesheet.

Upvotes: 1

Related Questions