ホバー時にCSSだけで画像を光らせる方法

よくある画像の上にカーソルを乗せると光ったように見えるようにCSSだけで実装する方法を紹介します。
jQueryでも実装できますが、今回はより簡単なCSSのみで実装できる方法になります。

 

 

ホバー時に画像を光らせる方法

まずHTMLでリンクを書きます。

<div class="img_hover"><a href="#"><img src="画像のディレクトリ"></a></div>

 

光らせるためのCSS

.img_hover:hover{
opacity: 0.7; /* 半透明にするCSS 数値で薄さを調整 */
}

 

これだけで光ったように見えるかと思います。
ただこれでは一瞬で変わってしまうのであまりきれいではないですね。
なので変わるまでの時間を指定して、ふわっと光るようにカスタマイズします。

 

 

HTMLはそのままで、CSSのみ追記します。

 

.img_hover{
transition: 0.7s; /* 0.7秒かけて変化させる */
}

.img_hover:hover{
opacity: 0.7; /* 半透明にするCSS 数値で薄さを調整 */
}

 

 

これで「ホバーした際に、0.7秒かけて0.7の不透明度で表示する」となります。
簡易なホバーエフェクトを付けたいときに使ってみてください。

コメント