シンプルなCSSで作るhover時の画像エフェクト[CSS]

webhostingsecretrevealed.comより、シンプルなCSSで作るhover時の画像エフェクトの紹介です。

デモページはコチラから

リンクで画像を背景画像として使用している場合、ホバーするとテキストの色だけで無く画像も変更させるCSSの設置の仕方です。

hover button

css0910221.jpg

ポイントは、次のような画像を用意し、ホバー時にネガティブマージンを指定して画像をずらすというやり方です。

.x a {
color: #cc3300;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 2px;
background-repeat: no-repeat;
}

.x a:hover {
color: #333333;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 -11px;
background-repeat: no-repeat;
}

hover background

css0910222.jpg

色の異なった二つの画像を用意して、それぞれのリンク時、ホバー時の背景画像として設置するだけです。

a.y {
width: 280px;
height: 42px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(images/b1.png);
background-repeat: no-repeat;
}

a.y:hover {
width: 280px;
height: 42px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(images/b2.png);
background-repeat: no-repeat;
}