Linear gradient and background size adding this cool effect, can any body explain

Question

I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew. This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top, Only think i knew it has to some thing with background image, linear gradient, background size, and background-position

Please have look and try to take me out of my misery.

li {
  background-image: linear-gradient(to bottom, transparent 50%, #a2d39c 50%, #a2d39c 95%, #7cc576 95%);
  background-size: 100% 200%;
  transition: all .25s ease;
}

li:hover {
  background-position: bottom center;
}

li a {
  display: block;
  padding: 1rem 0;
}

<ul>
  <li><a href="#" title="Home">Home</a></li>
</ul>

Answer 1

I've annotated your styles below to hopefully explain what is happening.

li {
    // You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
    background-image: 
        linear-gradient(to bottom, 
        transparent 50%, 
        #a2d39c 50%, #a2d39c 95%, #7cc576 95%);

    // The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
    background-size: 100% 200%;

    // This will nicely transition between CSS property values when they change
    transition: all .25s ease;
}
li:hover {
    // When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
    background-position: bottom center;}
}

Background Position

If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.

Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.

Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.

Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.

So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.

When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.

Does that help?