Diagonal background transition

by borayeris

HTML

<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>

CSS

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}

#box {
  position: fixed;
  top: 25%;
  left: 25%;
  height: 20vw;
  width: 20vw;
  border: 2px solid deepskyblue;
  background-color: black;
  color: ghostwhite;
  overflow: hidden;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 142%;
  height: 142%;
  transform: rotate(-45deg) translateX(-50%);
  transform-origin: top left;
  background: ghostwhite;
  z-index: -1; 
  background-image: linear-gradient(#B17461, #B17461);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s, color .5s;
}

#box:hover::after {
  height: 142%;
  background-size: 100% 100%;
  color: deepskyblue;
}
<div id="box">
  <span id="txt">
        TEXT
      </span>
</div>