Loading…

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

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

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

本日の人気記事BEST10

所要時間目安:2

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

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

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

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

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

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


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

エクストレイルとハリアー

伝えたいこと 時事ネタ

エクストレイル20Xtt特別仕様車ハリアー最大値引きはいくらなのか

ハリアーもエクストレイルも今年の来月6月には、マイナーチェンジをむかえます。両者ともに値引率、値引きしてもらうには絶好の時期でもあります。 そこで、ハリアーとエクストレイルについてディーラーにて値引き…

もっと読む

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

ChromeCookie個別削除方法

WordPress 不具合 伝えたいこと 備忘録

WordPressプレビュー出来ない。権限がありません。解決方法保存版

えー、はぁ( ´Д`)=3良かった…。 一昨日から続いていたWordPressで新規投稿記事や過去記事のプレビューが出来ないという問題・不具合について、 見事(やっと)解決できたので、 備忘録としての…

もっと読む

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

参議院議員選挙自民党広告

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

そうだ!選挙に行こう!!今回は18才以上の選挙権初の参院選です。

(アイキャッチ画像は今回の参議院議員選挙のインターネット広告のスクリーンショットです。) いよいよ、明日7月10日は参議院議員選挙の投票日です。 投票日でもあり開票日でもあります。(投開票日) (今更…

もっと読む

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

かたおとやわこで筋膜リリース

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

首肩腰のこりにかたおとやわこ。保阪尚希監修ディープアタッカーが欲しい…。

テレワークが多くなっている中で、パソコンの使用頻度が多くなっているのではないでしょうか。テレワークができない職種の方々には感謝しか言いようがありません。暑い中や寒い中に外で仕事をされていらっしゃる方や…

もっと読む

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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