0

I'm using the technique in the answer from this question, except that I'm wondering if it's possible to slide a background color change from left to right diagonally - specifically, from bottom-left to top-right?

I have this CSS and HTML for a menu, for example:

.menu {
background: #1481C3;
color: white;
border-right: 1px solid #666666;
}

.menu ul.links {
list-style: none;
padding: 0;
}

.menu ul.links li {
border-bottom: 1px solid #0E99ED;
height: 64px;
line-height: 67px;
padding: 0 25px;
font-size: 15px;
background: linear-gradient(to right, #0E99ED 50%, #1481C3 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.2s ease;
}

.menu ul.links li:hover {
background-position: left bottom;
cursor: pointer;
}
<div class="menu">
      <ul class="links">
        <li class="home">
          <div id="home" class="menu-icon-container">
            <img class="menu-icon" src="/images/home-icon.png" />
          </div>
          <span>Home</span>
        </li>
        <li class="assignments">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/assignments-icon.png" />
          </div>
          <span>Assignments</span>
        </li>
        <li class="proctoring">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/proctoring-icon.png" />
          </div>
          <span>Proctoring</span>
        </li>
        <li class="reports">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/reports-icon.png" />
          </div>
          <span>Reports</span>
        </li>
        <li class="administration">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/administration-icon.png" />
          </div>
          <span>Administration</span>
        </li>
      </ul>
</div>

And, to make it horizontal, I tried to change the styles of this class

.menu ul.links li {
    background: linear-gradient(to top right, #0E99ED 50%, #1481C3 50%);
}

But that is not quite working as expected: link to jsFiddle

I need the li to be 100% #0E99ED (light blue) initially and then 100% #1481C3 (dark blue) on hover. Currently that ^ is initially taking up about 25% of the bottom left with #0E99ED and only about 75% of the total li on hover. It needs to be 0% initially and 100% on hover.

Any suggestions for how to fix this?

HappyHands31
  • 4,001
  • 17
  • 59
  • 109

1 Answers1

4

If I understand you correctly all that is necessary is to increase the starting background-size so that no gradient is seen initially.

div {
  height: 100px;
  background-image: linear-gradient(45deg, blue 50%, lightblue 50%);
  background-size: 250% 100%;
  background-position: right bottom;
  transition: background-position .5s ease;
}

div:hover {
  background-position: left top;
}
<div></div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thanks. Can you please explain why `background-size` causes no gradient to be seen initially? – HappyHands31 May 14 '20 at 19:31
  • 1
    Because the actual image/gradient is much larger than the div "viewport" so the gradient is there you just can't see it starting. We're only seeing the right 40% say of it, until we move the "image" over to the right. – Paulie_D May 14 '20 at 19:35