WEBサイト制作

ショッピングサイト制作

システム開発

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

【CSSでできる!】hoverで画像を変える方法

2020年01月08日

投稿者: いづみ

こんな感じで画像Aをhoverして画像Bに変更したい!

という場合の方法をご紹介します。

まずはデモをご確認下さい↓↓

画像が変わっているかと思います。

では実際にコードを書いていきましょう!!

画像Aを背景画像に指定し、hoverで画像Bを表示させる

それだけです!とても簡単です。

コードは下記の通りです。

See the Pen JjoprgM by izumi sasaki (@izumi0110) on CodePen.

画像Aと画像Bを作るとき、縦と横のサイズは必ず同じにしましょう!!

まとめ

今回はシンプルに画像を変更しているだけですが、

リンク先に飛ばす画像にアレンジしてみたり、他にも色々な応用が出来るかと思います。

ホームページにhoverアクションがあると操作が楽しくなりますね。

TORATのホームページではスタッフ紹介の所に取り入れています。(PC版のみの対応しています。)

ぜひチェックしてみて下さいね!

この記事の投稿者

フロントエンドエンジニア

いづみ

久しぶりにie6でレイアウトが崩れたので復習

2011年5月4日 TORAT

リスト横並びで画像を並べた時の隙間を消す

2015年9月15日 TORAT

cssハック css hack – スタイルシート —

2010年4月30日 TORAT

なぜできた?画像の下にできてしまった隙間を無くすCSS

2019年12月25日 いづみ

ブログ一覧へ

書いた人

WRITERS