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

Last updated on 2017/04/12

こんにちは（・∀・）

前回は画像や背景画像を使わずに、マウスオーバーすると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

使用する背景画像です。

このサンプルはマウスオーバーした時に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

使用する背景画像です。

このサンプルはマウスオーバーした時に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;
}