I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right?
Here is the CSS and HTML code for a menu:
.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>In an attempt to make the transition horizontal, I adjusted the styles of the following class:
.menu ul.links li {
background: linear-gradient(to top right, #0E99ED 50%, #1481C3 50%);
}
However, it did not produce the desired effect. Here is the link to the jsFiddle that showcases the issue.
I aim to have the initial state of li be entirely #0E99ED (light blue) and then shift to 100% #1481C3 (dark blue) upon hover. Currently, the transition displays about 25% in #0E99ED initially at the bottom left and only reaches approximately 75% on hover instead of the full transition. It needs to begin at 0% and reach 100% on hover.
Any advice on how to address this challenge?