スポンサーリンク

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

更新日:

本日の人気記事BEST10

所要時間目安: 約 1

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

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

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

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

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

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

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



スポンサーリンク

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

 

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

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

先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。 画像にリンクがある場合にCSSだけでゆっくりと透過させる方法 こちらの続編で忘れないうちに記事に

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

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.