it-swarm.com.de

CSS-Hintergrundbild-Größenübergang

Ich arbeite an einem einfachen Markup mit der Größenänderung eines Hintergrunds im Hintergrund. Siehe die Geige:

http://jsfiddle.net/zeYZL/

Ich brauche dies, um mit einem einfachen CSS-Übergang animiert zu werden. und ich habe es versucht:

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

}

Aber dann wird das Hintergrundbild auf den Hover geklickt. (Siehe http://jsfiddle.net/5Hm9u/ )

Irgendwelche Tipps, um das Problem zu beheben?

Grüße, Chris

4
Chris Holstein

JSFiddle

Sie müssen auch background -Eigenschaften außerhalb von hover ablegen, damit es weiß, worauf Sie zurückkehren müssen, wenn Sie sich nicht im Hover befinden.

z.B.

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

Und wenn Sie möchten, dass der Übergang beim Mouseover erfolgt und Sie die Maus abziehen, setzen Sie den Übergang auf .tile und nicht auf .tile:hover.

JSFiddle

Randnotiz

Sie sollten es vermeiden, Inline-Stile zu verwenden, auf denen Sie ein Stylesheet verwenden können. Fügen Sie Ihr Hintergrundbild in .tile ein, anstatt das style-Attribut zu verwenden.

Vollständiges 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;
}
11
Albzi

Sie haben Inline-CSS, das in den ursprünglichen CSS-Status extrahiert werden soll.

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;

}
0
Paulie_D