マウスオーバーで画像を反転させる
リンク画像をバナーっぽくしたいという要望は以前存在しており、いくつかのサイトでも紹介されています。このページではグレースケールに変更する方法を紹介します。
ドラマチックなイメージになるかもしれませんね。個人的にはあまり使いたくはないけど、クリックはしたくなるかも(笑)
<style type="text/css">
a img:hover{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}
</style>
この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。