マウスをホバーしたときに画像をふわっと白くする方法

最近よく見る a 要素にマウスをホバーするとふわっと白くなるデザイン。

あれをやりたい！

a: hover のCSSで以下のような記述をするのかな？

• 画像の上に同じ大きさの半透明の白いボックスを出現させる
• 単に画像を半透明にする
• 光らせる（明度を上げる）

ググったところopacityで透明度を上げる方法が一般的なのかな？

ただ背景色が白以外の場合はその色が透けてしまうので、白く光っているように見せるには背景色を白に設定する必要があるようです。

しかし何度やってもうまく背景を白にすることができず、やっと成功した方法がこちら

（リストタグを使い、3つのカテゴリを並列させているので<li>の記述がありますが、ふわっと白くする方法とは関係ないです。）

つまづいたポイント

1. opacity だけだと背景色の黄色が透けて見えるだけで光る＜透明になるという印象になってしまった
2. hover したときに背景色を白にするCSS記述をするもうまく作動せず
3. a要素や img要素に背景色をCSSで記述するも作動せず
4. 一つ div を作成し、その背景色をCSSで白にすると思い通りの作動を確認

何故 a、img 要素に白背景を指定したのではうまくいかなかったんだろう・・・

インライン要素なのが原因なのか？

まだまだ初学者なので分からないことだらけです・・・

　→　

（分かりにくいですがホバーでふわっと白くなっています）

HTML

            <li>

                <a href ="#">

                <div class="item-image">

                <img src="./image/food.jpg">

                </div>

                <h3>FOOD</h3>

                </a>

                <p>……</p>

            </li>

CSS

.item-image {

  background-color: #fff;

}

.item li img:hover {

  opacity: 0.7;

  filter: alpha(opacity=70);

  -ms-filter: "alpha(opacity=70)";

}