ネットビジネス

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

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

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

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

 

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

 

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

 

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

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

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

著者プロフィール

keishi
1988年生まれ/早稲田大学社会科学部卒

好き:無印良品、mac、ラッコ、シンプルで上質なモノ。

嫌い:目覚まし時計、しいたけ、体育会系ノリ。

『就職したくない。。。ってか、朝早く起きれない。』

そんな思いで、就活で挫折していた、2013年の5月(25歳のとき)に0からPC1台、ネットビジネスを始めたのがきっかけ。

現在はビジネスコミュニティの運営、Webマーケティング、アフィリエイト、コンサル、などの活動が中心。

【実績】
2013/5 :ネットビジネス開始
2014/7 :月収100万円達成(プロモーション)
2015/2 :月収200万円達成(プロモーション)
2015/9 :月収1600万円達成(プロモーション)
2016/1 :月収200万円達成(自動化)
2016/9 :月収3000万円達成(プロモーション)
2017/2 :月収400万円達成(自動化)
2017/10:月収4900万円達成(プロモーション)

“1台のPC以外、持たない小さな起業という働き方を通して、心地のよいくらしを創る”ことを発信しています。

1台のPC以外、持たない小さな起業という働き方を0から実現するための教科書&メルマガの購読者は1万人を突破。

1台のPC以外持たずに、自由に働く月収100万円プレイヤーを多数輩出している、keishiが制作した小さな起業実践のための初心者向けの教科書『Net business navigation』が期間限定で無料で全てダウンロードできます。詳しくはこちら↓

期間限定ですので、興味があればこちらから今すぐご登録頂くことをおすすめします。