マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

投稿日:2014年5月29日 更新日:

画像のロールオーバーって面倒ですよね。

2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、
というのが一般的ですが、
今回は画像1枚だけ。CSSに4行記載するだけで使用できる方法を紹介します。

正確にはCSSでアルファ値を調整し透明度を変えることで
白のロールオーバーっぽく見せるというもので

opacityで透明度を変更します。

**********************
.rollover a:hover img{
opacity:0.6;
filter: alpha(opacity=60);
-ms-filter: “alpha( opacity=60 )”;
}
**********************

これでclass名に「rollover」を指定した下に[a]タグ>[img]が入れば自動でロールオーバーします。

たったこれだけですぐにロールオーバーが使用できますのでぜひお試し下さい。

 

*****************

ロールオーバー
 

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-CSS, WEB制作

執筆者:

関連記事

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) いいデザインと悪 …

ホームページのリニューアルを考えたときに意識すること

早稲田大学のオフィシャルサイトが5日にリニューアルされたのはご存知でしょうか? 見ていただけるとすぐに分かると思うのですが、このリニューアルがスゴイ! 大学のサイトとは思えないですよね。 あまりにもお …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …