今回は、サイトのページ内にあるクリック出来る画像に対してCSSでふわっと色が変化するマウスホバーアクションを付けてクリックできますよ感を出す方法を紹介します。
通常、画像リンクを挿入すると、ただリンクが付くだけであって見た目上や動き的にクリック出来ることが気づかれづくスルーされがちです。今回紹介するCSSでは、そんなもったいない状況を解消するために画像リンクを示す様なアクションをCSSで作っていきます。
そのために「:hover〜」と言われる擬似クラスを使っていきます。
マウスホバー
まずは、画像をdiv classで囲ったHTMLを用意します。そのdiv classに対してCSSでマウスホバーアクションを指定します。
HTML
<div class="img_ac2">
<a href="https://kt-life.net/bennritu-ru/">
<img src="https://kt-life.net/exsample.jpeg">
</a>
</div>CSSパターン1（白くふわっと）
マウスを乗っけると白いモヤみたいなものが被ってクリックできる感を演出します。
.img_ac1 a {
background:#fff;
border:2px solid #ddd;
display:block;
width: 400px;
height: 226px;
}
.img_ac1 a:hover {
opacity:.6
}
.img_ac1 img {
width: 100%;
transition-duration: 0.8s;
}実際の上記CSSを指定した画像はこちら。（マウスを乗っけてみて下さい。）
CSSパターン2（白黒からカラーに）
白黒な写真がマウスを載せるとカラーになるので、何だか気になる感を出しクリック出来ることに気づかせます。
.img_ac2 {
border:2px solid #ddd;
width: 400px;
height: 226px;
display:block;
overflow: hidden;
}
.img_ac2 img {
width: 100%;
transform: scale(1.1);
cursor: pointer;
filter: grayscale(100%);
transition-duration: 0.5s;
}
.img_ac2 img:hover {
filter: grayscale(0);
transition-duration: 0.5s;
}実際の上記CSSを指定した画像はこちら。（マウスを乗っけてみて下さい。）
以上が「画像にカーソルが乗るとふわっとクリック出来る感を出す方法」でした。
せっかく画像リンクを用意したのに、気づかれずにスルーされてしまったら勿体ないので、今回のようなクリック出来ます感でアピールしていきましょう。
