現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

画像にリンクがある場合にCSSだけでゆっくりと透過させる方法

WordPress カスタマイズ 伝えたいこと 備忘録

画像にマウスオーバーした時にゆっくり透過させる方法

所要時間目安：約2分

This session is using　 IPv4 　is established in

この記事は2017年3月4日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年4月25日 (金曜日)本日の人気記事トップ１０

カーメンテナンスWAKO'S

2025年4月25日 (金曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間

  1. 車検制度改正2025年4月1日から2ヶ月前から車検可能に 2PV

    2025年の4月1日から車検制度が改正されます。これまでは車検満了日の1ヶ月前からしか車検を受けられなかったのが、2025年4月1日からは2ヶ月前から車検実施が可能になります。車ユーザーとしては計画の…

    もっと読む

  2. バスピロー

    お風呂の枕バスピローおすすめと自作してみた。 1PV

    最近、お風呂の枕ことバスピローが多く出回っています。 ですが、広告やCMでは納得と思いきや（汗）…。 お風呂の浴槽の形・形状が違うことにお気づきでしょうか？ 多くの場合、昔ながらの垂直形状のもので紹介…

    もっと読む

  3. エンジンオイルシーリング剤Plus91

    エンジンオイル漏れ止めのおすすめはPlus91評価レビュー 1PV

    以前、オイル漏れ・オイル滲みが分かりエンジンオイルシーリング剤であるNUTECのOEM版でpitworkのNC81エンジンオイルシーリング剤を使用してみました。 ですが、一時オイル滲み・オイル漏れが止…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 22PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 21PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 22PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 21PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

今日は2025年4月25日です。

メルカリ招待コード：

リンクが付いたテキストや画像にマウスを乗せた時（マウスオーバー時）に、
いろんなアニメーショや何かしらの効果があると…。

なんだかカッコいいサイトになった気分になりますよね。

そこで今回は、WordPressでブログを運営しているあなたのために！！

プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。

これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう！

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ


画像にリンクがある場合にマウスオーバー時に画像をゆっくりと透過させる方法です。

 

やり方はいたって簡単です。

CSSに以下のコードを追記するだけでこんな風に簡単に画像にリンクがある場合はゆっくりとアニメーション効果をつけることができます。

画像にマウスオーバーした時にゆっくり透過させる方法

 

マウスオーバー時に画像にリンクがある場合ゆっくりと透過させる方法のコード。

 

/*画像にリンクがあった時にゆっくり透過させるCSS*/
 a:hover img {
 opacity: 0.5 ;
 filter: alpha(opacity=50) ; /* Ie用 */
 }

 img, video, object {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display: block;
 -webkit-transition: 0.8s;
 -moz-transition: 0.8s;
 -o-transition: 0.8s;
 -ms-transition: 0.8s;
 transition: 0.8s;
 }

 

まとめです。

いかがでしたか？

こんなオシャレなアニメーションが簡単にCSSにコピペで実装ができるんです。

是非これで他のサイトとちょっと差を付けてみてください。

上記のコードをスタイルシートCSSに追記するだけで以下のように、

ちょっとおしゃれ（オシャンティー）にサイトをカスタマイズできますよ！！

 

次回は、
テキストにリンクがある場合にマウスオーバー時にゆっくりとアニメーション効果をつける方法を、

紹介します！！

 

いろいろなアニメーション効果をつける方法がありますので期待していてください！！

最後にもう一回マウスオーバー時に画像を透過させた場合のデモです。

画像にマウスオーバーした時にゆっくり透過させる方法

追記）

テキストにリンクがある場合にアニメーション効果をCSSでつける方法を書きました。以下になります。

Windows10サポート終了まで

【AmazonタイムセールSALE車＆バイク】！


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展：Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり
Amazon
＼楽天ポイント4倍セール！／
楽天市場
＼ポイント5%還元！／
Yahooショッピング
メルカリ

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたにおすすめな関連記事

ノートパソコン分解後のファン

PC カスタマイズ 伝えたいこと 備忘録

ノートPCファンの異音でLIFEBOOKAH77/E分解

富士通製ノートPCで発売当初からブルーレイドライブ対応でかなりの高スペックノートPCだったLIFEBOOK AH77/Eです。 メモリの増設とHDDをハイブリッドHDD（SSHD）に換装はしましたが、…

もっと読む

インフィード広告アドセンス

コマンドrobocopyバックアップ

PC Windows10 カスタマイズ 備忘録

Windows10でWindows.old削除でなくバックアップ方法

多くの方々がWindows10にアップグレードした後に、 Cドライブ直下に「Windows.old」というフォルダがあり、 さらに結構な容量があります。 なので、 HDD容量が少なめの方やWindow…

もっと読む

インフィード広告アドセンス

AMP非対応化

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録 時事ネタ

AMP化対応方法を辞めてみるアクセス解析が不明瞭なので

昨年11月から徐々にAMP対応にしていき12月にはページのみAMP完全対応にしました。 ですが、 Google Analyticsでのアクセス解析の仕方・方法がいまいちわからないというのと、通常ページ…

もっと読む

インフィード広告アドセンス

Windows10でGoogle日本語入力が使えないのを使えるようにする方法

PC Windows10 不具合 伝えたいこと 備忘録 設定

Windows10でGoogle日本語入力が使えない時使えるようにする方法

Windows10がリリースされて早いもので約1年4ヶ月が経とうとしています。 そんな中Windows10がリリースされた直後は日本語入力のIMEがマイクロフト社製の生粋のMicrosoftIMEしか…

もっと読む

インフィード広告アドセンス

錦織圭君ノドグロ

伝えたいこと

ノドグロ枯渇の恐れが…。錦織君影響スゴイなぁ

 2014年の全米オープンテニスで見事準優勝という偉業を成し遂げたプロテニスプレーヤーの錦織圭君です。もうみなさん周知の事実ですよね。世界的にも、 超有名人になってくれました。（＾ｖ＾）&n…

もっと読む

インフィード広告アドセンス

zenbackイメージ画像を丸くする

WordPress テーマ 伝えたいこと 備忘録

zenbackのイメージ画像を丸くする方法

つい先の投稿で関連記事のイメージ画像を丸くする方法を投稿しました。 ですが、 それだけですと全体的なバランスが取れないことに気づきました^^; なので、 zenbackという関連記事？などを表示するツ…

もっと読む

「WordPress, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total596


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.