web-dev-qa-db-ja.com

ホバーでのCSS遷移フェード

CSSトランジションで問題が発生しました。ポートフォリオ用にCSSギャラリーを設計していますが、ホバー時に画像をフェードインする必要があります。私はこれを1時間以上いじっていましたが、誰かが正しい方向に向けてくれることを望んでいました。

JSFiddle を使用した簡易バージョンを次に示します。

csshovercss-transitions
19
kwh71787

画像ギャラリーには番号なしリストを使用することをお勧めします。

ホバーアウトした後、すぐに画像の不透明度を50％にしたい場合を除き、私のコードを使用する必要があります。移行がよりスムーズになります。

#photos li {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#photos li:hover {
    opacity: 1;
}
50
giannis christofakis

これはトリックを行います

.gallery-item
{
  opacity:1;
}

.gallery-item:hover
{
  opacity:0;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}
14
Darwayne