Webサイトにありがち、画像にマウス重ねたら、白くなる仕様

はじめに

よくWebページとかにある画像にマウスを重ねると、背景が白っぽくなり押せる、ような印象をユーザに与えてくれる仕様を自身のプロダクトに取り入れてみたかった。

しかし、やり方がわからない。

backgroundあたりを設定してもだめ。

<div class="user_article_image">
    <a href="***********>
        <img class="article_img" src="#">
    </a>
</div>

結論

hover時にopacity のプロパティ設定すれば解決

.user_article_image {
    transition: all 0.3s;
}

.user_article_image:hover {
    opacity: 0.8;
}

終わりに

おまけ

マウスホバーで拡大

.user_article_image {
    transition: all 0.3s;
}

.user_article_image:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

なんかそれっぽくなった。感激。
動画を載せられたら、イメージがつきやすいのだが、zennは載せれないみたい。