How can i add a text over an div animation?-CodePudding

Hey I recently started learning HTML.

I have a "tank" with some liquid (animation). Now I want would like to add over this liquid animation the value how much it is for example 85%. If I turn the p tag in the liquid div than the text rotate too, but it should not be. How can I solve this problem?

HTML Part

            <div id="gas-station-diesel-tank-background">
          <div >
            <div >

              <div >
                <p id="gas-station-diesel-tank-progress-text">85%</p>

              </div>
            </div>
          </div>
        </div>

CSS Part


@keyframes spin {
    from {
        transform: rotate(0deg);
   }
    to {
        transform: rotate(360deg);
   }
}

.gas-station-diesel-progress {
    position: relative;
    width: 250px;
    height: 250px;
}

.gas-station-diesel-progress .gas-station-diesel-progress-inner {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    width: 95px;
    height: 190px;
    margin-top: 1px;
    border-radius: 5px;
}

.gas-station-diesel-progress .gas-station-diesel-progress-inner .gas-station-diesel-progress-inner-water {
    position: absolute;
    z-index: 1;
    background: linear-gradient(-90deg, rgba(130,250,88,1) 0%, rgba(2,163,119,1) 100%);
    width: 300%;
    height: 150%;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: all 1s ease !important;
    -webkit-transition: all 1s ease !important;
    top: 15%;
    left: -50%;
    border-radius: 45% !important;
    animation-duration: 10s;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-top: -5px;
    margin-left: -37px;
}

#gas-station-diesel-tank-progress-text {
    font-family: 'Titillium-Bold';
    font-size: 18px;
    color: #fff;
    margin-left: 30px;
    bottom: -10px;
    text-shadow: 0px 0px 10px #000000;
}

CodePudding user response：

Remove your text from the liquide that like so:

<div >
  <p id="gas-station-diesel-tank-progress-text">85%</p>
  <div ></div>
</div>

You can put it above or below.

Add position absolute to your text so that is it removed from the flow of the document and doesn't interfere with your other elements. Add z-index to position it above the water.

#gas-station-diesel-tank-progress-text {
    font-family: 'Titillium-Bold';
    position: absolute;
    font-size: 18px;
    color: #fff;
    margin-left: 30px;
    z-index: 10;
    text-shadow: 0px 0px 10px #000000;
}