画像にカーソルを合わせると徐々に白いぼやをかける方法コピペで使えるHTML+CSS

画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。

画像imgを徐々に白いぼやをかけ、徐々に元に戻す(透明度の操作)
関連デザイン

画像imgを徐々に白いぼやをかけ、徐々に元に戻す(透明度の操作)

スタイルシート属性で記述

<span class="over-animation"><img csrc="sakura.jpg" /></span>

.over-animation img{
  transition: all 2s; /* 2秒で適用するということ*/
  opacity:1; /* 元々、opacityは1であるから最初の読み込み時点では何の変化もない */
}
.over-animation{
  background: #ffffff; /* 白いバックグラウンド。つまり、画像が透明化すればこの壁紙が透けて見える */
}
.over-animation:hover img{
  opacity:0.2; /* マウスがspan.over-animationに重なれば透明度が0.2となる。これはtransition:all 2sの影響を受ける */
}

.over-animation:hover img は .over-animation imgの影響下にある