CSS3で透明度を変える!画像リンクの:hoverをのっぺりさせる方法

2012年7月12日 21:31 

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • Yahoo!ブックマークに登録

ホームページ制作の中で、ボタンのロールオーバー時にエフェクトをかける時javascriptを使用したり2種類のボタンを1枚の画像にしてcssで制御したり、と方法はいくつかありますよね。

そんな中で今日は、CSS3で登場した opacitytransition を使って「ロールオーバーすると色が薄くなるボタン」を実装する方法をご紹介します!

使い方

ロールオーバーを設定したい要素の :hover に、透明度を設定する opacityプロパティを指定します。
.button a img:hover
{
     opacity: 0.6;
} 
これで button クラスの付いたリンク付き画像はホバー時に透明度60%になるはずです。
9.jpg
ここではまだ「のっぺり」したホバーではありませんよね。
次に transition を使用してロールオーバー前→ロールオーバー後を徐々に行うよう設定します。

transition は、「 :hover を設定した要素」に設定します。
今回の例で言うと以下の img が対象になります。
.button a img
{
     -webkit-transition:opacity 0.2s linear;
} 
これで button クラスの付いたリンク付き画像は0.2秒かけて opacity:0.6 に変わります。
10.jpg
:hover 時に設定するプロパティ、秒数、変化の仕方、の順で設定していきます。
変化の仕方には以下のような種類があるので、自分のホームページに合わせて変更してみてください。

  • default
  • linear(一定のスピード)
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier() 4つの数字をカンマ区切りで指定

javascriptや2枚画像を使ったロールオーバーよりも簡単で余分なコードも少ないため、ぜひ試してみてください。

この記事は以下を参考にしています

CSS3 アニメーション(Transitions)の使用方法 | CSS Lecture

シェアする

  • このエントリーをはてなブックマークに追加
comments powered by Disqus

Twitter

Facebookページ


Clip to Evernote このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録

月別アーカイブ

  • セーノのtwitter
  • セーノのfacebookページ
  • セーノのmixiページ
  • セーノのwordpressブログ
  • セーノのgoogle plusページ