CSS image d'arrière-plan de la taille de la transition

Je suis en train de travailler sur un balisage simple avec redimensionnement d'une div à l'arrière-plan img.
Voir le violon:

http://jsfiddle.net/zeYZL/

J'ai besoin de cela pour être animée avec une simple transition CSS.
et j'ai essayé de faire ceci:

#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;

}

Mais alors l'image de fond des clips sur le vol stationnaire. (Voir http://jsfiddle.net/5Hm9u/)

Des conseils sur la façon de résoudre ce problème?

Salutations, Chris

Pour une raison quelconque stackoverflow ne m'autorise pas à vous salue tous

OriginalL'auteur Chris Holstein | 2014-04-30

  1. 11

    JSFiddle

    Vous avez besoin de mettre background propriétés à l'extérieur de la hover trop, de sorte qu'il sait ce qu'il doit retourner à lorsqu'il n'est pas sur le vol stationnaire.

    par exemple

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

    Et si vous le souhaitez transition à la souris et quand vous prenez la souris désactivé, vous mettez la transition sur .tile et pas .tile:hover

    JSFiddle

    Note de côté

    Vous devriez éviter d'utiliser des styles en ligne où vous pouvez utiliser une feuille de style.
    Mettre votre image d'arrière-plan dans .tile plutôt que d'utiliser le style attribut.

    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;
}
    A fait le tour, merci! Stupide, je ne l'ai pas vu moi-même
    Pas de soucis! Content d'avoir pu aider!

    OriginalL'auteur Albzi

  2. 0

    Vous avez du CSS qui doit être extrait à l'initiale CSS état.

    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;

}

    OriginalL'auteur Paulie_D