【CSS】CSSで出来るマウスオーバーエフェクト

2015/03/26 サイト制作, 技術系 投稿者:竹内

CSSの小技 その8
今回は「CSSで出来るマウスオーバーエフェクト」です。
マウスカーソルを乗せた時(主に画像)の演出についてCSSのみでいろいろと出来ます。
当ブログのトップページでは画像に対してズームがかかるエフェクトを導入しています。

ズームイン/ズームアウト

hover01

transform: scale()を使って画像の大きさを変更し、ズームエフェクトにします。
マウスオーバー時にアニメーションをして画像をズームさせます。
transform: scale()の数値を調整することでズームイン、アウトの使い分けができます。

HTML

CSS

明るくする(半透明にする)

hover02

お次は、opacityを利用して、マウスを乗せた時に画像を半透明にして、 白い背景を透かせることで画像が明るくなったように見せます。
このエフェクトは良く見かけるものです。
背景の黒いサイトでは黒が透けて逆に暗くなってしまいますので、 その場合は画像と同サイズの白い背景を置きます。

HTML

CSS

白黒画像、セピア画像、ブラー

hover03

filter: grayscale()を利用して白黒画像に、またfilter: sepia()を利用してセピア画像にすることができます。 それからfilter: blur()を利用してブラー(ぼかし)の画像にすることもできます。
この3つの効果についてはIEでは効果が無いようで、FirefoxやGoogleChromeでは表示されました。

HTML

CSS

他にも

他にも、画像を回転させたり、ピカっと光る演出を入れたりすることもできるようですし、いくつかのエフェクトを複合することもできます。
ズームや半透明はよく使いますが、白黒画像、セピア画像、ぼかし画像は今後使っていきたいと思いました。

また、もう少し調べてみようと思いますが、IEでも問題なく使えれば、白黒画像、セピア画像はマウスオーバーに限らず画像をおしゃれに見せる演出として使えそうです。

参考にさせていただいたサイト
NxWorld様 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 http://www.nxworld.net/tips/css-image-hover-effects.html

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)