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

所要時間目安：約 2 分

This session is using　 IPv4 　is established in

ストレートネック症状と原因そして治し方など

テキストにリンクがある場合にアニメーション効果をつけるCSS方法11選

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

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

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

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

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

そこで今回は、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;
 }

「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: サーバ上のファイルやフォルダ削除できない時に削除する方法

: Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

: WordPressプラグインなしでコンタクトフォームを作成方法

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: Stinger7にテーマ変更してみたが…。

: YouTube動画が遅い。重い時、掲載しても遅くならない方法

あなたにおすすめ

: 伝えたいこと備忘録
山の日8月11日で2016年から年間祝日（国民の祝日）が増える
国民の祝日として今現在（2016年1月4日）定義されているのは、 16日です。（去年までは15日。）なぜ1日増えて16日間となったのかは、 1996年に施行された海の日についで、今年から山の日が…
もっと読む

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

: WordPress カスタマイズカスタマイズ伝えたいこと備忘録
WordPressブログカードEmbedで実装方法
WordPressがバージョン4.4になってから、はてなブログのようなブログカード風のリンク先が、エディタのビジュアル画面の投稿画面にURLを入力するだけでブログカードを実装できるようになりました…
もっと読む

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

: PC カスタマイズカスタマイズ伝えたいこと備忘録設定
MicrosoftIMEショートカットキー一覧Google日本語入力も同じ
これまで、日本語入力にソフトには元祖のジャストシステムさんのATOKや、WindowsOSの標準装備されたIME、もしくは、Google日本語入力などがメインではないでしょうか？その日本語入力（IME…
もっと読む

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

: 伝えたいこと備忘録
ヒトってなに？人って何？人間ってなに？成長て何？
ヒトなのだから・・・。女性でも男性でも同じ人間であってヒトなのだから・・・。そして発生学的には、はじめはみんなメスなのだから・・・。

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

: 伝えたいこと備忘録治療
帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏
以前に帯状疱疹かと思い皮膚科を受診しました。そしたら、ちょっと診断まではつかないなぁ。ということでステロイド軟膏と神経障害性疼痛に処方されるリリカという薬が処方されました。それから1ヶ月弱・・・・…
もっと読む