CSSのopacityプロパティで簡単に画像をロールオーバー

ロールオーバーの手法は様々ありますが、画像1つで実現できるロールオーバー。細かい挙動は出来ませんが、軽く視覚変化を起こしたいときに有効です。

CSSのプロパティはopacityを使います。CSS3で勧告予定のプロパティですが、モダンブラウザでは実装されています。問題となるIEは独自拡張指定で対応。

プロパティ

IE

filter: alpha(opacity=透明度);
100=100%相当。50%の場合は、50

Firefox・Netscape

-moz-opacity:.透明度;
1.0=100%相当。50%の場合は、.50

Opera・Safari

opacity:透明度;
1.0=100%相当。50%の場合は、.50

サンプルファイルをダウンロード

画像をimg要素で使用する場合

CSS

img {
border: none;
}
a:hover img {
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

HTML

<a href="#"><img src="img/btn.gif" alt="ホーム" width="174" height="50" /></a>

画像置換の場合

CSS

.btn a {
background: url(img/btn.gif) no-repeat;
display: block;
width: 174px;
height: 50px;
text-indent: -9999px;
}
.btn a:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

HTML

<p class="btn"><a href="index.html">ホーム</a></p>

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。