現在の接続環境は
です

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

Windows10サポート終了まで
国民総株主
¥1,650 （2024/11/30 16:49時点 | Amazon調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
Yahooショッピング
メルカリ

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

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

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

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

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

  • 本日
  • 週間
  • 月間
  1. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 8PV

    この度は（今回は？）、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側（トランスミッター）のみをなくしてしまった場合です。（まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  2. NISSANセレナとエクストレイルのオルタネーター（ECOモーター）リコール対応 4PV

    さてさて、この度はタイトル通りのNISSANの代表車種セレナとエクストレイルなどのオルタネーター（ECOモーター）のベアリングの不具合リコール対象車の暫定的なカバーを付けるというリコール対応をしてもら…

    もっと読む

  3. ブレーキペダルストローク調整部分

    ブレーキペダル調整ストローク調整方法高さ調整 2PV

    やっと、 本来書こうとしたネタである車ネタを書きます。多くの車でフットブレーキがあるのは当たり前です。 （ないと車とは言えないんですが^^;）そのフットブレーキがメーカーや車種によって、高さや長さが違…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 110PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 110PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

今日は2024年12月10日です。

目次に行く･戻る

2024年12月10日 (火曜日)本日の人気記事トップ１０

メルカリ招待コード：

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

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

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

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
新型コロナワクチン予診票ジェネレータ

インターネット カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ 治療

新型コロナワクチンの予診票ジェネレーター。これは便利!?

今月に入り急激に新型コロナウイルス感染症のPCR検査陽性者が急激に激減しました。そして、政府（国）は、ワクチンの摂取を推奨してはいます。ワクチンはファイザー社製かモデルナ製の2択でしたが、アストラゼネ…

もっと読む

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

MicrosoftブラウザEdge

PC Windows10 ブラウザChrome 伝えたいこと 備忘録

これからのブラウザはEdgeでもいいのかもGoogle日本語入力が使えるようになったから。でも、やっぱりChrome…。

この間というか先日Windows10のおいてGoogle日本語入力を、Windows10標準のブラウザであるEdgeで使えるようにしてからですが、 意外とEdgeもレンダリング速度が速い？とも思ってし…

もっと読む

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

Windows10アップグレードキャンセル方法

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

Windows10アップグレードキャンセル方法をMicrosoft正式に公開

マイクロソフト（Microsoft）によるWindows10へのアップグレード攻撃？と通知が無償アップグレード期間残すところ約2ヶ月となったところで、3月ころから勝手にWindows10になっていた（…

もっと読む

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

お金アメリカ米ドルと日本円変換

AdSense ツール 伝えたいこと 備忘録

外貨計算機アメリカ米ドルを日本円にリアルタイム相場で変換するツール（方法）

Googleのサービスで利益を得ている人やその他デイトレーダーの方たちや・・・。もろもろでアメリカ米ドルでの取引がある方々には必須の計算（機）かと思います。

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

2匹のネコ

AdSense php WordPress カスタマイズ テーマ

Stinger6カスタマイズ?スマホ表示がオカシイので変更と削除した部分

ここ10日間くらいwordpressの勉強に励んでいるところです。 テーマは、 調べた所一番評判が良いStingerというものにしました。 バージョンは6です。 Stinger5も一応ダウンロードはさ…

もっと読む

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

歯磨きは1日1回

伝えたいこと 備忘録 治療

新常識、歯磨きは1日1回寝る前だけで十分？

世の中、追々真実？という（言われる）ものはなぜか変わっていきます。 特に、 医療の内科的なことなど…。 一番人間が生きていく上でお世話になる医療という分野っていとも簡単に常識的な予防方法などが変わって…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total414


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


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

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

Protected by AFFINGER