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

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

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

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

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

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

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

この記事を読む方へのオススメ

カーメンテナンス
ワコーズ

カーパーツ
WAKO'S

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

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

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方法11選

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

📅 2017.03.05 | 📂 WordPress, カスタマイズ, 伝えたいこと, 備忘録

Auto Spec ニッサン エクストレイル T32前後期に適合 内蔵型コンソールボックス 車内収納ボックス 2ポートUSB充電付き 車種専用設計 センサーLEDライト付き 小物入れ 滑り止めマット付き 収納アクセサリー 装着簡単 (ニッサン・エクストレイル T32前後期, ブラック)

¥5,980 （2025/09/20 19:25時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

メルカリ

ポチップ

NISSAN(ニッサン) 日産純正部品 リモコン TV & VTR B8084-C9993

¥7,800 （2025/09/13 14:27時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

メルカリ

ポチップ

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？