マウスオーバーした画像を半透明にする方法【コピペでできる!】

今回はワードプレス当のブログにおいてマウスオーバーした時に画像の色を反転というか、半透明にする方法をお教えします。

マウスオーバーした画像が半透明半透明になるとは
こういうことです。

画像にマウス矢印を載せる前 画像にマウス矢印を載せた後
マウスオーバー前 マウスオーバー後

 

僕のブログでも画像にマウスオンした時に色が半透明に
なっています。

 

実はこれ結構簡単にできるので実はやりたいけれどもやり方
がわからなかったという方はぜひ、動画を参考に実践してみてください。

 

マウスオーバーした画像を半透明にする方法 動画

動画で指定している場所に以下のコードをコピペしてください。

/* マウスオーバーで画像半透明 */
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を
書き換えてもすぐに反映されない場合があるからです。

当ブログからの無料プレゼントはこちら
バナー

いかがだったでしょうか?参考になれば幸いです

当記事を気に入って頂けましたら、ソーシャルメディアボタンを押して共有して頂けると嬉しいです

このエントリーをはてなブックマークに追加