今回はワードプレス当のブログにおいてマウスオーバーした時に画像の色を反転というか、半透明にする方法をお教えします。
マウスオーバーした画像が半透明半透明になるとは
こういうことです。
| 画像にマウス矢印を載せる前 | 画像にマウス矢印を載せた後 |
 |
|
僕のブログでも画像にマウスオンした時に色が半透明に
なっています。
実はこれ結構簡単にできるので実はやりたいけれどもやり方
がわからなかったという方はぜひ、動画を参考に実践してみてください。
マウスオーバーした画像を半透明にする方法 動画
動画で指定している場所に以下のコードをコピペしてください。
/* マウスオーバーで画像半透明 */
a img {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
今回はワードプレスブログにおけるやり方をレクチャー
しましたが、別のブログサービスにおいても基本的に
CSSに上記のコードを貼りつければできます。
また、今回はマウスオーバーした画像を半透明にするコードを
お教えしましたが、マウスオーバーした時に画像が動くエフェクト
などに関して記述されているコードを同じ方法で貼り付ければ
画像が動くようになります。
※CSSを書き換えてもマウスオーバーした時に画像が半透明に
ならないという方は、しばらくそのまま放置したら解決する可能性が
あります。
というのも使っているサーバーやキャッシュなどの関係でCSSを
書き換えてもすぐに反映されない場合があるからです。
