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版のみの対応しています。)

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

この記事の投稿者

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

いづみ

スマートフォンページ幅対策

2011年11月22日 TORAT

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

2015年9月15日 TORAT

Flashの上に画像 swfファイルの上に画像

2010年10月15日 TORAT

2020年2月5日 アンディ

ブログ一覧へ

書いた人

WRITERS