Transition on background-size doesn't work

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.