マウスオンでピカッ!wordpress画像をロールオーバーで透過

wordpress-rollover

ロールオーバー“とは、マウスが画像や文字の上を通過する際に画像や文字のスタイルを 切り替える機能の事だ。

画像の上にマウスを持っていくと、画像が光る事はないだろうか?ロールオーバーを使って画像を透過させて、画像に、そんなおしゃれな機能を付け加える方法を解説する。

ロールオーバーを使い画像透過させるにはstyle.cssを使用する。以下のコードをstyle.cssの下部に追加しよう。

/* 画像にマウスが乗ると光る */
a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

たったこれだけで完了だ。

これが通常の画像

wordpressの画像にマウスが乗ると光らせる

これがマウスが上に乗った時の画像

wordpressの画像にマウスが乗ると光らせる

これで画像の上をマウスが通過した時に光るイメージを演出する事ができた!