1484890904 白地の画像に、カーソルをあわせたときに色を変えたいとおもっています(貼付画像をご参照ください)。


ネットでしらべてみると、いろいろな方法があるようですが、そのなかでもCSSをつかった方法をご教示していただきたいとおもっています。

よろしく、おねがいいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/01/20 14:41:44
  • 終了:2017/01/21 16:34:15

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4584ベストアンサー獲得回数19242017/01/20 16:18:08

ポイント390pt

その画像の「白地」によってやり方が変わります。

簡単なのは、その白地が「透過色」の場合。

<img class="change_background" src="...">

<style>
.change_background:hover {
    background-color: orange;
}
</style>

IMG 要素に :hover という疑似クラスを指定して、マウスカーソルが上に乗ったときに、というスタイルが指定できます。
ただ、元の画像が背景が透明色になっていない場合には、画像の加工が必要です。


面倒なのは、白地が「透明ではない白」の場合。
CSS だけではできなくて、ほんの少し HTML の助けが必要です。

<div class="change_background">     <!-- 画像を括る要素 -->
  <img src="...">
</div>

<style>
.change_background {
    display: inline-block;
}
.change_background:before {
    content: "\0020";
    position: absolute;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

IMG 要素を DIV などでくくって、そちらに CSS の目印をつけます。
で、マウスを重ねたときに、画像の上に半透明な色付きのカバーをかけてあげます。
半透明な要素を重ねているので、画像に書かれた文字は少しぼんやりしますし、濃い色の背景色は指定できません。


画像を IMG 要素ではなく、他の要素にして CSS で背景画像として指定するなら、タグはひとつだけで済みます。

<div class="change_background"></div>   <!-- IMG ではなく、DIV とか -->

<style>
.change_background {
    background-image: url(...);     /* 背景画像として、指定する */
    display: inline-block;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
    background-repeat: no-repeat;
}
.change_background:before {
    content: "\0020";
    width: 100px;
    height: 100px;
    position: absolute;
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

こちらも半透明な要素を重ねているので、二番目のやり方と同じような制約があります。


jsFiddle にサンプルを書いてみたので、そちらも合わせてご覧ください。
https://jsfiddle.net/c37hdxh3/

他2件のコメントを見る
id:torimaki

ケース1でしたら、なんとなく、理解できます。ケース2、ケース3のかんじも好きなのですが、こちらは、これからの宿題です。お手数をおかけしました。

2017/01/21 16:33:27
id:a-kuma3

you're welcome :-)

2017/01/21 18:06:05

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4584ベストアンサー獲得回数19242017/01/20 16:18:08ここでベストアンサー

ポイント390pt

その画像の「白地」によってやり方が変わります。

簡単なのは、その白地が「透過色」の場合。

<img class="change_background" src="...">

<style>
.change_background:hover {
    background-color: orange;
}
</style>

IMG 要素に :hover という疑似クラスを指定して、マウスカーソルが上に乗ったときに、というスタイルが指定できます。
ただ、元の画像が背景が透明色になっていない場合には、画像の加工が必要です。


面倒なのは、白地が「透明ではない白」の場合。
CSS だけではできなくて、ほんの少し HTML の助けが必要です。

<div class="change_background">     <!-- 画像を括る要素 -->
  <img src="...">
</div>

<style>
.change_background {
    display: inline-block;
}
.change_background:before {
    content: "\0020";
    position: absolute;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

IMG 要素を DIV などでくくって、そちらに CSS の目印をつけます。
で、マウスを重ねたときに、画像の上に半透明な色付きのカバーをかけてあげます。
半透明な要素を重ねているので、画像に書かれた文字は少しぼんやりしますし、濃い色の背景色は指定できません。


画像を IMG 要素ではなく、他の要素にして CSS で背景画像として指定するなら、タグはひとつだけで済みます。

<div class="change_background"></div>   <!-- IMG ではなく、DIV とか -->

<style>
.change_background {
    background-image: url(...);     /* 背景画像として、指定する */
    display: inline-block;
    width: 100px;       /* 画像のサイズに合わせる */
    height: 100px;      /* 画像のサイズに合わせる */
    background-repeat: no-repeat;
}
.change_background:before {
    content: "\0020";
    width: 100px;
    height: 100px;
    position: absolute;
}
.change_background:hover:before {
    background-color: orange;
    opacity: 0.3;
}
</style>

こちらも半透明な要素を重ねているので、二番目のやり方と同じような制約があります。


jsFiddle にサンプルを書いてみたので、そちらも合わせてご覧ください。
https://jsfiddle.net/c37hdxh3/

他2件のコメントを見る
id:torimaki

ケース1でしたら、なんとなく、理解できます。ケース2、ケース3のかんじも好きなのですが、こちらは、これからの宿題です。お手数をおかけしました。

2017/01/21 16:33:27
id:a-kuma3

you're welcome :-)

2017/01/21 18:06:05
id:disillusionist No.2

disillusionist回答回数40ベストアンサー獲得回数172017/01/20 22:20:49

ポイント39pt

画像背景は「透過」ではなくて「白」であるという前提で。

CSS3

figure img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}
figure:hover img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}

HTML5

<figure>
<img src="http://serif.hatelabo.jp/images/original/9e21827a947e2c7cd68183403c31781a6c5d4118.gif" />
</figure>

https://jsfiddle.net/chnb8ghe/1/

id:a-kuma3

sepia フィルターだと、飯まず写真になる気が :-)
# 半透明のカバーも大して変わらないか

2017/01/21 00:45:31
id:torimaki

disillusionistさん

ご回答、ありがとうございまーす。こちらも、じっさいにやってみました。
YouTubeの「ケース4」となっおります。

https://youtu.be/AU_2YMDrxGg

2017/01/21 12:27:48

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません