After stumbling upon this interesting codepen featuring a diagonal fill div on hover, I find myself wondering how to change the starting point of the fill from bottom right to bottom left. While it may seem like a simple task, I am at a loss on where to begin. Any guidance or assistance on this matter would be immensely appreciated.
.diagonal {
position: relative;
line-height: 50px;
background: #67809F;
color: white;
border: none;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
z-index: 1;
padding: 0px;
}
.diagonal:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 1000%;
background: #34495E;
z-index: -1;
transform-origin: 0% 0%;
transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
/transform: translateY(10%) translateX(16%) rotate(-45deg);
transition: transform .3s;
}
.diagonal:hover::after {
transform: translateY(10%) translateX(-25px) rotate(-45deg);
}