人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

1484890904
●拡大する

●質問者: torimaki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●390ポイント ベストアンサー

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

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

<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/


torimakiさんのコメント
a-kuma3さん ご回答、ありがとうございまーす! じっさいに、やってみました。下記YouTubeをご参照ください。kumaさんに貼っていただいた方法の上から順番に「ケース1」「ケース2」「ケース3」となっています。 https://youtu.be/AU_2YMDrxGg

a-kuma3さんのコメント
白地は透過色なんですね。 であれば、ケース1のやり方で色を調整するのが簡単で良いと思います。

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

a-kuma3さんのコメント
you're welcome <tt>:-)</tt>

2 ● disillusionist
●39ポイント

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

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/


a-kuma3さんのコメント
sepia フィルターだと、飯まず写真になる気が <tt>:-)</tt> # 半透明のカバーも大して変わらないか

torimakiさんのコメント
disillusionistさん ご回答、ありがとうございまーす。こちらも、じっさいにやってみました。 YouTubeの「ケース4」となっおります。 https://youtu.be/AU_2YMDrxGg
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ