CSSを使い画像1種類だけでロールオーバー効果を簡単に実現する方法 | バシャログ。

画像にリンクをはる場合、ロールオーバー用の画像を別途書き出して JavaScriptで差し替える方法が一般的です。 それだと毎回画像が増えるたびに、ロールオーバー用の画像を書き出すのが手間になります。 今回ご紹介するのは、そんな画像効果を簡単に実装するためのTIPSです。 上記の画像にマウスオーバーすると、画像のスタイルが切り替わります。 htmlのコードはこんな感じ。 <ul class="photo"> <li><a href="#"><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></a></li> <li><a href="#"><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></a></li> <li><a href="#"><img s

[kkeisuke]

opacity　filter