menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

CSS3

こんにちは(・∀・)

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

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

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

アニメーション系の動きのロールオーバーボタンはこちらをご覧ください。
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リファレンス

  • カテゴリー:Labs