画像にマウスが乗ったときに、マウスの周りのみ画像を透明にする方法

Question

一枚の画像の一部分のみにマウスが乗っかると、
そのマウスの周辺の一部分のみを透明にする方法はありますでしょうか？
マウスの乗っていない部分は通常表示されている状態を作りたいです。

夜に懐中電灯で照らしているようなエフェクトを実装したいです。

Answer 1

丸くくりぬいたように透明部分がある透過PNGを用意して、対象画像の上に重ね、マウスの動きに合わせてその画像を動かせばそれっぽくなるかもしれません。

くりぬきサンプル：https://jsfiddle.net/08pavc5h/ （コメントで提示したもの）

---

追記：

画像自体を消してしまう方法では -webkit-mask-image なら「画像側」を消せます。

-webkit-mask-image サンプル：https://jsfiddle.net/08pavc5h/1/

【mask - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/mask

SVGとかでもいけるとは思います。

【CSSのみで画像のマスキング - Qiita】
http://qiita.com/C058/items/25f0c5e362ba7a5e99e3

Comments

[think49]

> 丸くくりぬいたように透明部分がある透過PNGを用意して、対象画像の上に重ね
その場合は、画像が重なっているので透過pngで下の画像が見えるだけ(見た目上は何も変わらない)のでは…。
まともに実装しようとするなら、指定した範囲を透過色で上書きした画像に置き換えないといけないと思います。
正直、img要素でやるレベルの話ではない気がしますが、canvas要素で画像を読み込ませて、改変した画像を用意させた後でdata-uriでimg.src を上書きすればいけるんでしょうか…。

[kei344]

「夜に懐中電灯で照らしているようなエフェクト」なのでそれで十分かと。
（追記：イメージ ⇒ https://jsfiddle.net/08pavc5h/ ）

[think49]

切り抜き部分以外が黒単色ならそれでいいと思うのですが、夜景の画像をくりぬくのなら無理と思っていました。
質問者さんの要件次第ですね…。

[退会済みユーザー]

一応くりぬき部分が黒単色をイメージしておりました。
色々な例を教えていただきありがとうございました。