CSSを使った画像のホバー時の設定

小川さん
聞いてくれ、 カンマンからのお知らせだ。

はじめまして、カンマン新人Webデザイナーのtkmです。
私は他業種から転職し、Webデザイナーとしての実務は未経験で日々勉強をしながら業務をしております。
今後のために自分が学んだことの整理や参考にしたい情報等をアウトプットしていきたいと思います。

今回はCSSを使ったホバー時の設定について。
Webサイトではマウスをリンクが貼ってあるところに持っていくとテキストの色が変わったり、画像が変わったりとリンクしているということを分かりやすくしています。
それにはjavascriptやCSSを使ってホバー時の動きを設定しています。

まず、そのうちのCSSを使う基本のプロセスについてはこちらをご覧ください。

それを踏まえて、例えば画像の透明度を変えて分かりやすくする場合、CSSの設定はこのようにします。

a img {
overflow: hidden;
}

a:hover img
{
opacity:0.5;/Safari,Opera/
filter: alpha(opacity=50);/IE/
-moz-opacity: 0.5;/Firefox/
-ms-filter: “alpha( opacity=50 )”;/* IE 8 */
}

これは一例に過ぎませんが、こういったホバー時の設定に何を使うのかを選ぶこともデザインのひとつであると教わったので、調べていたらこんな情報を見つけました。

・[CSS]コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ

javascriptを使わなくてもこれだけ動的なエフェクトができるとのことなので、今後使ってみたいですね。

カンマン最新情報をゲット!

Facebookのウォールで

Twitterのタイムラインで

この記事を書いた人

comman
comman 社を背負った存在 あるときはディレクター、あるときはエンジニア、そしてデザイナにも、夜寝ているときだけ現れる、妖精さん的アカウントです。 commanが書いた他の記事をチェック!

もう1記事どうぞ!

  • 関連
  • 人気
  • 最新

コメントを残す