Trying to hover over white text-CodePudding

I used this example: https://codepen.io/t_afif/pen/BaYKNEK

But I want the background color to be white and not black and as soon as I change to white then the hover doesn't work for me

This is my code:

HTML:

<div >
  <h1 >
    Hi,
    <div>I'm Opal.</div>
    <div >Fullstack Developer / Frontend / Backend</div>
  </h1>
</div>

CSS:

.hover {
  color: #0000;
  background:
  linear-gradient(90deg,#1095c1 50%,#000 0)
  var(--_p,100%)/200% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  transition: 5s;
}

.hover:hover {
  --_p: 0%;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

 h1 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}

CodePudding user response：

This animation works by changing the background color of the text. Not the actual text color.
The current color is set to transparent, which is why the background color shines through

To change the initial color, you would change the background, the color of the gradient.

  color: #fff0;  /* #fff = white, #fff0 = white and fully transparent*/
  background:
  linear-gradient(90deg,#1095c1 50%, #fff 0)  
  /*                    ^             ^                                    */ 
  /*           #1095c1 = blue,      #000 is black, we change this to #fff for white */

.hover {
  color: #fff0;
  background: linear-gradient(90deg, #1095c1 50%, #fff 0) var(--_p, 100%)/200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 5s;
}

.hover:hover {
  --_p: 0%;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  background-color: #444;
}

h1 {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  margin: 0;
  cursor: pointer;
  padding: 0 .1em;
}

<div >
  <h1 >
    Hi,
    <div>I'm Opal.</div>
    <div >Fullstack Developer <br> Mostly Backend | Learning css</div>
  </h1>
</div>