マーカーネット株式会社

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

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

関連記事

CSS3の便利機能紹介。

CSS3の便利機能紹介。 https://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ https://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …

WEBサイトの配色に迷った時の必見サイト!

こんばんは! 本日社内で勉強の一環で某テストを受けた、風邪気味のKです! 夏休みも目前!早く元気になりたい! さてさて、このところお仕事をさせていただいている際、 セオリーにハマった色使いを真似ている …

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …