CSS Background image size transition

Question

I am working on a simple markup with resizing a div's background img. See the fiddle:

http://jsfiddle.net/zeYZL/

I need this to be animated with a simple CSS transition. and I tried doing this:

#tile:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;

}

But then the background image clips upon the hover. (See http://jsfiddle.net/5Hm9u/)

Any tips on how to fix it?

Greetings, Chris

Answer 1

JSFiddle

You need to put background properties outside the hover too, so it knows what to return to when not on hover.

e.g.

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-position:0px 0px;
}

And if you want it to transition on mouseover and when you take the mouse off, you put the transition on .tile and not .tile:hover

JSFiddle

Side note

You should avoid using inline styles where you can use a stylesheet. Put your background image in .tile rather than using the style attribute.

Full CSS:

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-image:url(http://www.placehold.it/450x450);
  background-position:0px 0px;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}

.tile:hover {
  background-size:550px 550px;
  background-position:-50px -50px;
}

Answer 2

You have inline CSS which should be extracted to the initial CSS state.

JSfiddle

.tile{
    float:left;
    margin:1px;
    width:450px;
    height:450px;
    overflow:hidden;
    background-image:url(http://www.placehold.it/450x450);
    -webkit-background-size: 450px;
    background-size: ;
    background-position: center;
    transition:all 0.5s ease;

}
.tile:hover {
    background-size:550px 550px;

}