マーカーネット株式会社

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]が入れば自動でロールオーバーします。

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

 

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

ロールオーバー
 

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

【Illustrator小技】PDFファイルを代替フォントでなくアウトライン化して開ける便利なワザ

アウトライン化されていないPDFをIllustratorで開こうとする時、 Illustrator「このPDF、該当するフォントがないから代替しちゃいますね~」 デザイナー「うわぁぁフォント変わっちゃ …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …