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?

Viniculture

also as @fsn mentioned, you have missing semicolon on 8 line – Finedraw

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

Finedraw

It seems this doesn't work in Chrome, which is why I thought my own project wasn't working, along with your JS Fiddle link. Firefox makes it show fine, but Chrome shows no transition – Nursling

If you want it to work with Chrome you need to give both parameters. Like that background-size:100% 100%; – Nankeen

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.

Primrose

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%);
  }

Curtal

Answer 4

Firstly You have to set background-size: 100%; if you want to get transition of 108% on hover.

Hallmark