Я хотел бы иметь изображение на веб-странице, которое станет прозрачным при наведении мыши, но прозрачно только в некоторой области, ближайшей к указателю мыши, перемещая эту область с помощью указателя.
Простой переход непрозрачности легко достигается с помощью CSS:
<style type="text/css">
img.transparent {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
img.transparent:hover {
opacity: 0;
}
</style>
<img class="transparent" src="1.jpg">
Это делает изображение красиво исчезающим на мыши и появляется обратно на мыши.
Но то, что я хотел бы достичь, это тот же эффект только для некоторой области рядом с указателем мыши. Так что всегда будет прозрачная область под указателем, а она перемещается по изображению.
Есть ли способ достичь этого с помощью CSS или JS?
Спасибо!