画像ホバー時の CSS トランジションのスムーズなイーズアウト効果を実現するにはどうすればよいですか?

CSS トランジションの問題: イーズインはあるがイーズアウトはできない

この質問は、画像の CSS トランジションの実装に関するものです。画像上にマウスを置くと画像は滑らかにぼやけますが、マウスを離れると突然元の状態に戻ります。望ましい動作は、画像のぼかし効果が緩和されることです。さらに、この質問では、CSS のみを使用してホバー時にテキストを表示する可能性についても検討しています。

イーズアウトの解決策

目的のイーズアウト効果を実現するには、 CSS トランジション設定を、:hover 疑似クラスではなく要素自体に適用します。これにより、ホバーのオンとオフの両方でトランジションが確実に発生します。

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

ホバー時にテキストを追加する

CSS のみを使用して画像上にホバーしたときにテキストを表示するには:after 疑似要素を利用します:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

これらの調整に従うことで、マウス カーソルが離れたときに画像のぼかし効果が解除され、ホバーするとテキストが表示されます。

以上が画像ホバー時の CSS トランジションのスムーズなイーズアウト効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。