CSS を使用してホバー時のぼやけた画像のスムーズな遷移を実現するにはどうすればよいですか?

ぼやけた画像の CSS トランジションを緩和する

CSS :hover 疑似クラスを使用して画像上にカーソルを置くと、次を使用してぼかしフィルターを適用しますフィルター プロパティは、視覚的に魅力的な効果を作成します。ただし、マウスを取り除くと画像が突然通常の状態に戻ることが一般的に観察されます。この動作は、移行フェーズ中に「イーズアウト」効果が欠如していることが原因である可能性があります。

この問題を解決し、両方向でスムーズな移行を保証するには、移行プロパティを:hover 疑似クラスのみではなく、実際の要素。これにより、要素上でマウスを移動したり要素から外したりするときに、遷移がスムーズに行われるようになります。

例:

次のコード スニペットを考えてみましょう:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

この更新された例は、:hover 疑似クラスの代わりに .img-blur クラスに遷移プロパティを適用することで、両方向に動作する遷移がどのように生成されるかを示しています。

追加の機能強化:

もう 1 つの一般的な要件は、ぼやけた画像の上にマウスを置いたときに、その上にテキストをオーバーレイすることです。これは JavaScript を使用して実現できますが、CSS メソッドはより効率的で軽量なソリューションを提供します。その方法は次のとおりです:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

このコードでは、デフォルトでは非表示になっている .text-overlay 要素を導入しています。画像の上にマウスを移動すると、:hover 疑似クラスがアクティブになり、オーバーレイが表示され、ぼやけた画像の上に位置合わせされます。このアプローチにより、テキスト オーバーレイのスタイルをより詳細に制御できるようになります。

以上がCSS を使用してホバー時のぼやけた画像のスムーズな遷移を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。