ウェブ、ショウジン

画像のロールオーバー(ホバー)時の透明度変化の効果をCSSのみで実装する(IE、Firefox、Chrome、Safari等に対応)

2012-2-29
Category
CSS

ボタン画像のホバー(ロールオーバー)時の効果が透明度の変化だけなら、わざわざその状態の画像を用意しなくてもCSSだけで処理してしまえば楽だよなと今さらながら思ったので、やってみて自分用作業ライブラリに追加。

IE6以降、Firefox、Chrome、Safariにも対応。

ちなみに、あくまでもimg要素に対してで、いくら画像を使っていてもbackgroundとかで背景に使用している場合はこの方法は使えない。

画像のロールオーバー(ホバー)時の透明度変化の効果をCSSのみで実装するデモ

デモページのソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のロールオーバー(ホバー)時の透明度変化の効果をCSSのみで実装する</title>
<link rel="stylesheet" href="/demo/css/reset.css" type="text/css" media="all" />
<style type="text/css">
	/* 数値が不透明度の割合 */
	.btnMenu a:hover img{
		filter:alpha(opacity=70);  /* IE7以下向け */
		opacity:0.7; /* Fx1.5以上、Opera、Safari向け */
		-ms-filter:"alpha(opacity=70)"; /* IE8向け */
		-moz-opacity:0.7; /* Fx1.5未満向け */
		-khtml-opacity:0.7; /* Webkit向け */
	}
</style>
</head>
<body>
	<h1>画像のロールオーバー(ホバー)時の透明度変化の効果をCSSのみで実装するデモ<br />IE6以降、Firefox、Chrome、Safari等に対応</h1>
	<a href="/" class="backLink"><img src="/demo/_shared/transparent.png" width="62" height="62" alt="" /></a>

	<ul class="btnMenu">
		<li><a href="http://amzn.to/xZvewO"><img src="img_btn.jpg" width="200" height="200" alt="" /></a></li>
	</ul>

	<p class="footer"><a href="/">ウェブ、ショウジン</a></p>
</body>
</html>

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿