アイキャッチ画像

HOME > ウェブデザイン > 【CSS】画像リンクのマウスオーバー時に透明度を変えるスタイルシート

記事公開日：2009.6.26

この記事は約1分で読めます。

当ページのリンクにはプロモーションが含まれています。

【CSS】画像リンクのマウスオーバー時に透明度を変えるスタイルシート

この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。

画像（img）にリンクを貼る際、マウスを乗せると透明度が変化して「リンク画像」とわかりやすくさせる CSSの覚書です。

スポンサーリンク

スポンサーリンク

実装


a:hover img {
	opacity: 0.7;
	filter:alpha(opacity=70);
}

0

1

2

3

4

5

a:hover img {

opacity: 0.7;

filter:alpha(opacity=70);

}

上記は、マウスオーバー時、透明度70％の設定になります。

demo

ワードプレス有料テーマの探し方画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞコメントをキャンセル

おススメ記事

アイキャッチ画像

【WordPress】プラグインに頼るよりもfunctions.phpにコピペした方が便利でラクなTipsたち

ワードプレスのfunctions.phpというファイルに様々なコードを加えることで記事作成がより効率的になり、最小限のプラグインでウェブサイトを見やすくすることができたりします。

オフィスチェア「エルゴヒューマンプロ」の快適度

オフィスチェアのエルゴヒューマン（プロ）という高機能オフィスチェアを購入してだいぶたちました。予想以上の使い勝手に『投資した』甲斐があるってもんです。

アイキャッチ画像

【済】花好きの奥さんの誕生日プレゼントに贈った「プリザーブドフラワー」がことのほか喜ばれていと嬉し

誕生日プレゼントやお祝い品に悩んでいる方は手入れ不要で数年は楽しめる「プリザーブドフラワー」を贈られてみてはいかがでしょうか。

Let's note

念願のLet's note（LX4）を購入！HD+（1600×900ドット）という絶妙な解像度で作業効率アップ

思い切ってPanasonicのLet's note（LX4）を購入しました。これまでで最高の使い勝手です。