Notice: jetpack_enable_opengraph の使用はバージョン 2.0.3 から非推奨になっています ! 代わりに jetpack_enable_open_graph を使ってください。 in /virtual/id696g/public_html/blog.696.jp/wp-includes/functions.php on line 3831

マウスオーバーした時に画像をCSSで置換

///マウスオーバーした時に画像をCSSで置換

マウスオーバーした時に画像をCSSで置換

画像の置換、何かと使いますね。
バナーだとかボタンだとか。マウスオーバーした時に、ちょっと色が明るくなったりするだけで、見栄え違いますもんね。

その昔は

こんな書き方をしてました…。よろしくないですね…我ながら…。

ということで、CSSでの書き方をめもめも。

画像は最初から表示しておく画像と置換後の画像を一つにまとめたものを作らねばなりません。
20121225
↑こんな感じに。

overflow:hiddenで余計な部分を非表示にして
マウスオーバーした時に、上の方に画像を移動させると。>margin-topで

サンプルがこちら。

Comments
By | 2013-06-21T11:55:49+00:00 12月 25th, 2012|memo, txt|0 Comments

コメントを残す

Shares