web-dev-qa-db-ja.com

CSS背景画像サイズの遷移

Divの背景画像のサイズを変更する簡単なマークアップに取り組んでいます。フィドルを参照してください：

http://jsfiddle.net/zeYZL/

これを単純なCSSトランジションでアニメーション化する必要があります。そして私はこれをやってみました：

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

}

ただし、ホバーすると背景画像がクリップします。 （ http://jsfiddle.net/5Hm9u/ を参照）

それを修正する方法に関するヒントはありますか？

あいさつ、クリス

cssbackgroundhovertransition
4
Chris Holstein

JSFiddle

backgroundプロパティもhoverの外に配置する必要があるため、ホバーしていないときに何に戻るかがわかります。

例えば.

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

また、マウスオーバー時に遷移させたい場合、マウスを離したときに、遷移を.tileではなく.tile:hoverに置きます。

JSFiddle

サイドノート

スタイルシートを使用できるインラインスタイルの使用は避けてください。 style属性を使用するのではなく、背景画像を.tileに配置します。

完全な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

最初のCSS状態に抽出する必要があるインラインCSSがあります。

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