menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【CSS3】マウスオーバーでボタンの画像が変わるロールオーバー

【CSS3】マウスオーバーでボタンの画像が変わるロールオーバー

こんにちは(・∀・)

前回は画像や背景画像を使わずに、マウスオーバーするとCSSだけで要素の色が変化するロールオーバーを、サンプルを使用してご紹介しました。

今回は画像や背景画像を使ってマウスオーバーするとCSSだけで画像が変化するロールオーバーを、サンプルを使用してご紹介します。

ボタンがテキストリンクのロールオーバーはこちらをご覧ください。
【CSS3】マウスオーバーでボタンの色が変わるロールオーバー

アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
【CSS3】CSSだけでアニメーションするリンクボタン

サンプル1

画像要素をマウスオーバーした時にopacityプロパティで要素を透過させて画像を変化させています。

HTML

<ul class="demo1">
<li><a href=""><img src="logo-sample.png" alt="Webデザインラボ"></a></li>
<li><a href=""><img src="logo-sample.png" alt="Webデザインラボ"></a></li>
<!--demo1--></ul>
CSS

.demo1 {
  display: flex;
  justify-content: center;
}
.demo1 li {
  background: url(logo-sample2.png) no-repeat;
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  margin-right: 1px;
}
.demo1 li a {
  display: block;
}
.demo1 li a img {
  width: 200px;
  height: 40px;
}
.demo1 li a:hover img {
  opacity: 0.5;
}
Result
  • Webデザインラボ
  • Webデザインラボ

使用する背景画像です。
サンプル画像

サンプル画像

このサンプルはマウスオーバーした時にopacity:0.5でロールオーバーさせています。画像を透過させることによって下に指定してある背景画像が表示されて画像が変化しているように見えます。なのでロールオーバーで見える画像の色が若干元の色と違って見えます。

opacityプロパティについて詳しくはこちらのページをご覧ください。
opacity【CSS3リファレンス】

サンプル2

画像要素をマウスオーバーした時にvisitilyプロパティで要素を見えなくして画像を変化させています。

HTML

<ul class="demo2">
<li><a href=""><img src="logo-sample.png" alt="Webデザインラボ"></a></li>
<li><a href=""><img src="logo-sample.png" alt="Webデザインラボ"></a></li>
<!--demo1--></ul>
CSS

.demo2 {
  display: flex;
  justify-content: center;
}
.demo2 li {
  background: url(logo-sample2.png) no-repeat;
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  margin-right: 1px;
}
.demo2 li a {
  display: block;
}
.demo2 li a img {
  width: 200px;
  height: 40px;
}
.demo2 li a:hover img {
  opacity: 0.5;
}
Result
  • Webデザインラボ
  • Webデザインラボ

使用する背景画像です。
サンプル画像

サンプル画像

このサンプルはマウスオーバーした時にvisibility:hiddenでロールオーバーさせています。画像を見えなくすることによって下に指定してある背景画像が表示されて画像が変化しているように見えます。

opacityプロパティについて詳しくはこちらのページをご覧ください。
opacity【CSS3リファレンス】

サンプル3

マウスオーバーした時にその要素に指定してある背景画像を切り替えて変化させています。

HTML

<ul class="demo3">
<li>btn</li>
<li>btn</li>
</ul>
CSS

.demo3 {
  display: flex;
  justify-content: center;
}
.demo3 li {
  display: block;
  background: url(logo-sample3.png);
  background-size: 200px;
  width: 200px;
  height: 40px;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  line-height: 2.6;
}
.demo3 li a {
  display: block;
  color: #fff;
}
.demo3 li a:hover {
  background: url(logo-sample4.png);
  background-size: 200px;
  background-position: bottom;
}
Result

使用する背景画像です。
サンプル画像

サンプル画像

このサンプルはマウスオーバーした時に設定してある背景画像が切り替わることでロールオーバーさせています。

サンプル4

CSSスプライトで指定してある背景画像をマウスオーバーした時に表示する画像の位置を移動させて背景画像を変化させています。

HTML

<ul class="demo4">
<li>btn</li>
<li>btn</li>
</ul>
CSS

.demo4 {
  display: flex;
  justify-content: center;
}
.demo4 li {
  display: block;
  background: url(logo-sample5.png);
  background-size: 200px;
  width: 200px;
  height: 40px;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  line-height: 2.6;
}
.demo4 li a {
  display: block;
  color: #fff;
}
.demo4 li a:hover {
  background: url(logo-sample5.png);
  background-size: 200px;
  background-position: bottom;
}
Result

使用する背景画像です。
サンプル画像

このサンプルは背景画像をCSSスプライトで表示しています。マウスオーバーした時に設定してある背景画像の位置が変わることでロールオーバーさせています。画像の位置を変えることによって下に設定してある背景画像が表示されて画像が変化しているように見えます。


関連リンク

opacity【CSS3リファレンス】
CSS3リファレンス

  • CSS3 マウスオーバー ロールオーバー
このエントリーをはてなブックマークに追加