Transition on background-size doesn't work - css

Question

I'm trying to put a transition on my background-image on hover.
This is my Code so far:
HTML
<div class="item-one"></div>
CSS
.item-one {
height: 345px;
width: 256px;
background: url('http://placehold.it/256x345') scroll no-repeat center center;
background-size: cover;
-webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 150%;
}
See JSFIDDLE
But this doesn't work for me, tested in different browsers. Other transitions like background-color work as expected. Is there any restriction for transitions on this property?

Answer 1

I think the problem is with background-size: cover, when you change it to
background-size: 100%;
it will work
JSFiddle
There is some other question about background-size: cover alternative, that can help Is there an alternative to background-size:cover?
Or some different solution for problems like this:
CSS3 crossfade bg image when cover is used

Answer 2

You have a typo:
.item-one {
...
-o-transition: background-size 1500 linear
...
}
working version below:
.item-one {
background-size: 50%;
webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear;
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 100%;
}
works fine, it didn't wokred before cuz of 'background-size:cover' :
**‘cover’:**
Scale the image, while preserving its intrinsic
aspect ratio (if any), to the smallest size such
that both its width and its height can completely
cover the background positioning area.

Answer 3

Try this using transform: scale(150%) for the item-one and the container set the specific size and overflow: hidden;
<div class=container>
<div class="item-one"></div>
</div>
css:
.container {
overflow: hidden;
}
.item-one:hover {
transform: scale(150%);
}