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

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

87b65edeee5e45099705a86df09c5558.png
  • Вопрос задан
  • 2834 просмотра
Пригласить эксперта
Ответы на вопрос 7
rOOse
@rOOse
Frontend developer
Хм, на ум приходит только большой bg с дыркой, координаты дырки привязывать к координатам мыши =)
Ответ написан
Не уверен, что кто то с ходу даст 100% рабочее решение, так как задача не тривиальна, на мой взгляд.
Предложенное решение с фоном хорошее, вопрос только в размере фона. Можно еще посмотреть в сторону SVG на нем можно сделать не тривиальные вещи, но повторюсь 100% готового решения под вас не будет ;)
Пример тени с анимацией на SVG
Пример перемещение SVG объекта за курсором.
Пример перетаскивания SVG объекта мышкой.
Ответ написан
@killer112
Если кроссбраузерность не требуется, то можно посмотреть в сторону масок: www.w3.org/TR/css-masking/#the-mask-image - кладем изображение в виде фона, затемняем его, к координатам мышки привязываем блок с фоном и маской. Для хрома приблизительно вот так: jsfiddle.net/JkuR9/3

Второй вариант - canvas.
Ответ написан
Комментировать
@idruweb Автор вопроса
тоже пока вижу это как единственный рабочий способ(
Ответ написан
Комментировать
@halfcupgreentea
скорее всего решение с фоном и png будет подтормаживать, можно попрбовать рисовать на канве.
Ответ написан
Lisonok
@Lisonok
У родителя ставите overflow hidden
Картинки задаете псевдо класс :after
ширина и высота в два раза больше картинки
задаете внутренюю тень box-shadow: inset
играетесь с top и left в зависимости от расположения мыши
Ответ написан
@stas3572
Да какая «нетривиальная», не тривиальная если только на чистом 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'
	});
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы