マウスオーバーすると、色が変わったり、様々なアクションが走ったりと、WEBデザインでは多用されるホバーエフェクト。簡単に透明度だけ変えたり、色を変えたりというシンプルなものも良いのですが、一工夫されたホバーエフェクトは上手に使えばサイトの質を向上させてくれます。今日紹介するのはリッチなホバーエフェクトを実現するCSSセット「IMAGE HOVER EFFECTS」です。

画像が拡大されたり、フィルタが掛かったような表現になったり、全部で16ものホバーエフェクトを簡単に実装することが可能です。

詳しくは以下

こちらのホバーエフェクトはjavascriptは利用しておらず、全てHTMLとCSSで実現可能となっています。サイトにアクセスして、好きなホバーエフェクトをクリックすると実装するためのサンプルコードを見ることが可能です。

ライセンスはThe MIT License (MIT)となっており、githubでも公開されていました。実装も手軽なので利用したいという方は是非どうぞ。

Bootstrap Hover Image Gallery