現在の接続環境は
です

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

Windows10サポート終了まで

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

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

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

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

2024年11月21日 (木曜日)本日の人気記事トップ１０

今日は2024年11月21日です。

目次に行く･戻る

2024年11月21日 (木曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

    エクストレイルフォグランプが下を向きすぎている光軸調整方法 39PV

    人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

    もっと読む

  2. Windows10で動かないアプリを動かす方法2 16PV

    先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

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

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

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

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 507PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

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

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

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

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 507PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

メルカリ招待コード：

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

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

そこで今回は、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でつける方法を書きました。以下になります。

クリスマスまであと…プレゼントは用意されましたか？

🎉 Counting Up! 🎉
Loading...

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

Googleで働きたい7才少女への返信レター

伝えたいこと 備忘録 時事ネタ

Googleで働きたい！と手紙を書いたら、Googleのボスから返事がきた！

なんとも愛らしいというのでしょうか、子供の夢や思いまでをも大切にする素晴らしい社風とでもいうのでしょうか・・・・・。 7才の少女が、「Googleで働きたい！」とGoogleのボスである社長（CEO）…

もっと読む

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

WordPress

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

WordPress記事中最初のH2見出し前に広告を自動挿入方法

WordPressで記事の途中に思い通りの広告などをショートコードなどによって、 挿入する方法はいくつかあります。 今回は、 記事中の始めのh2タグの前にウィジェットとして追加して自動的に表示する方法…

もっと読む

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

フォルダアイコンサイト

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

フォルダアイコン変更方法とフリーアイコン素材で作業効率アップ

さてさて、いまさらですがWindowsのフォルダアイコンって一律に決まっていますよね！？ そんなフォルダアイコンをカラーバリエーション豊富に？変更して見易さをよくしてどのフォルダが重要でどんな内容なの…

もっと読む

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

Windows10アップグレード後画面

PC Windows10 伝えたいこと 備忘録

Windows7でつけっ放しで外出したらWindows10になっていた…。恐いなぁ…。

画像引用元）:https://twitter.com/poti1990/status/708217655077920768/photo/1?ref_src=twsrc%5Etfwもう、Windows1…

もっと読む

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

年賀状ソフト筆ぐるめ

PC Windows10 ツール 伝えたいこと

年賀状ソフトおすすめ筆王、筆まめ、筆ぐるめ最新版で年賀状作成

もう12月です。早いものですね。年賀状の準備や喪中はがきの準備などに追われ始めていることかと思います。以前にWindows10でもWindows7やWindows8.1などにバンドルされていた筆ぐるめ…

もっと読む

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

記事上に人気記事表示

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

究極のSEOそれは…。

 よくGoogleに対する検索上位表示させる方法・手法・技法などを総称してSEO（Search Engine Optimization）と言います。一個人である私もブログを始めてから意識して…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total394


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

あと5秒で記事が閲覧できます。

Protected by AFFINGER