Gradient transitioning through background-position does strange things - html

Question

I'm trying to create a transition on a gradient background of a <div>. I'm trying to do it this way because I'd like to implement two different styles on my site a light one and a darker one. After choosing the right color and implementing a way to change between the two themes I thought why not build a transition to smoothen the switch between themes.
I looked up a way to transition a gradient. I found this blog: Sapphion.com. It explains how to transition a gradient through the background-position.
After copying the code to a jsFiddle it sort of worked. It doesn't matter what I set on the background-position it always transitions to the full gradient from 0% to 100%. I want to transition it from 0% to 50% so that you only see 50% to 100% of the gradient. Does anyone know how to do this or did I miss something?

Answer 1

your mistake was to specify background-position: 100y; in the hover state.
It should have been (since you are moving the gradient in the vertical direction)
background-position-y: -100px;
full CSS:
#DemoGradient{
background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px; /* correct value if you want it to get at 50% */
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position-y: -100px;
}
updated demo