transition effect not working on hover with linear-gradient to bottom - css

Question

I have two boxes, each have :hover selector which transition linear-gradient background image.
linear gradient to top works perfectly fine with transition (code below).
.box7:hover{
color: #FFF;
background-image: linear-gradient(to top, #000 50%, #fff 50%);
background-position: 0% 100%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
but I am having problems with linear gradient to bottom, transition effect doesn't seems to work (code below).
.box2:hover{
color: #FFF;
background-image: linear-gradient(to bottom, #000 50%, #fff 50%);
background-position: 100% 0%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
Any help would be appreciated.
Below is the link to check (hover on all boxes)
https://conrad93.github.io/linear-gradient-sliding-effect/boxbox.html

Answer 1

The problem is that your styles are not applied when you aren't hovering over the element. The solution is therefore to apply these styles to the default state of the element as well. Something like this:
// html
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
</div>
// CSS
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: solid 1px red;
margin: 5px;
transition: all .4s ease;
background-color: lightgoldenrodyellow;
}
.box-1 {
background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 0%;
background-size: 100% 200%;
}
.box-1:hover {
background-position: 0% 100%;
}
.box-2 {
background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 100% 200%;
}
.box-2:hover {
background-position: 0% -200%;
}
.box-3 {
background-color: crimson;
background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-3:hover {
background-position: 0% -100%;
}
.box-4 {
background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-4:hover {
background-position: 0% 100%;
}
Within the declaration block for the hover state, you only need to declare those properties that are changing, in this case background-position.
Here is a working example on JsFiddle.
You probably also want the diagonal gradient to animate up from the bottom left of the element. This is a little tricky to do, but you can see it working in the example. To understand why it works, you need to understand what the x and y values in the background-position property mean. MDN docs are a good place to learn.