Как сделать просветление фона при наведении?

Question

[Александр]

При движении мышкой над блоком должен просвечивать цветной фон.
Переход плавный без четкого определения границ.

Comments

[Юрий Лобанов]

@idruweb ну как, Вы сделали?

[Александр]

пока не нашел идеального решения

[Юрий Лобанов]

@idruweb напишите мне на почту

Answer 1

[Руслан]

Хм, на ум приходит только большой bg с дыркой, координаты дырки привязывать к координатам мыши =)

Comments

[Юрий Лобанов]

большой бг не нужен.

Answer 2

[Maksim Zverev]

Не уверен, что кто то с ходу даст 100% рабочее решение, так как задача не тривиальна, на мой взгляд.
Предложенное решение с фоном хорошее, вопрос только в размере фона. Можно еще посмотреть в сторону SVG на нем можно сделать не тривиальные вещи, но повторюсь 100% готового решения под вас не будет ;)
Пример тени с анимацией на SVG
Пример перемещение SVG объекта за курсором.
Пример перетаскивания SVG объекта мышкой.

Comments

[Юрий Лобанов]

можно обойтись двумя картинками, примерно 500 на 500 и 1 на 1

[Александр]

может поможете кодом за $?

[Юрий Лобанов]

@idruweb пишите на почту, у меня в профиле есть.

Answer 3

[killer112]

Если кроссбраузерность не требуется, то можно посмотреть в сторону масок: www.w3.org/TR/css-masking/#the-mask-image - кладем изображение в виде фона, затемняем его, к координатам мышки привязываем блок с фоном и маской. Для хрома приблизительно вот так: jsfiddle.net/JkuR9/3

Второй вариант - canvas.

Answer 4

[Александр]

тоже пока вижу это как единственный рабочий способ(

Answer 5

[halfcupgreentea]

скорее всего решение с фоном и png будет подтормаживать, можно попрбовать рисовать на канве.

Comments

[Руслан]

Вот, тоже думал, но так как нет опыта работы с canvas, не решился советовать) каким образом кстати? Копировать участок области под мышью и выводить поверх? А переход в полупрозрачность можно сделать будет?

[Юрий Лобанов]

не будет подтормаживать.

Answer 6

[Lisonok]

У родителя ставите overflow hidden
Картинки задаете псевдо класс :after
ширина и высота в два раза больше картинки
задаете внутренюю тень box-shadow: inset
играетесь с top и left в зависимости от расположения мыши

Comments

[Александр]

довольно резкий ареол получается

Answer 7

[stas]

Да какая «нетривиальная», не тривиальная если только на чистом css было бы (и то решение у меня есть, но врядли рабочее, да и поддержка браузерами неважная):

.block,
.block:hover{
cursor: url(images/gradient.cur), pointer;
}

А вообще настоящее простое решение вот:

<div class="banner">
	<div class="cursor-grad"></div>
	....
</div>

banner - position:relative, cursor-grad - position:absolute, visability:hidden, фоном градиент пнг-шный, размеры - по размеру фона.
а дальше простой jquery:

$('.banner').on('mousemove', function(e){
	$('.cursor-grad').css({
		left: e.pageX - $('.banner').offset().left,
		top:  e.pageY - $('.banner').offset().top,
		visibility: 'visible'
	});
});