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

522
21 мая 2017, 22:19

С помощью чего можно воплотить эту идею? Имеется ввиду CSS, SVG, JPG (фон) становится видимой при наведении курсора на SVG (png) элемент. В данном случае "Лампочка" отдельный html элемент, который является ссылкой. Важный момент - лампочек может быть несколько.

Answer 1

Немножко поиграться с PS и вообще можно карту из таких ховеров сделать. Ну типа большой див position: relative; ,a внутри куча позиционных. А это так пример.

.img a{ 
display:block; 
height:300px; 
width:300px; 
background-image:url(http://savepic.ru/14038389.png); 
} 
.img a:hover{ 
display:block; 
cursor:pointer; 
height:300px; 
width:300px; 
background-image:url(http://savepic.ru/14026101.png); 
}
<div class="img"><a></a></div>

Answer 2

Запустите в браузере - картинки я не масштабировал, а потому здесь они тупо смотрятся

.all{ 
display:block; 
position:relative; 
margin: 10% auto ; 
height:50vh; 
width:80vw; 
border:2px solid red; 
} 
.img:nth-child(1){ 
display:inline-block; 
position:absolute; 
left:50px; 
top:20px; 
height:200px; 
width:200px; 
background-image:url(http://htmlbook.ru/example/images/sun1.png); 
} 
.img:nth-child(1):hover{ 
cursor:pointer; 
background-image:url(http://htmlbook.ru/example/images/sun2.png); 
} 
.img:nth-child(2){ 
display:inline-block; 
position:absolute; 
right:50px; 
top:20px; 
height:200px; 
width:200px; 
background-image:url(http://htmlbook.ru/example/images/sun1.png); 
} 
.img:nth-child(2):hover{ 
cursor:pointer; 
background-image:url(http://htmlbook.ru/example/images/sun2.png); 
}
<div class="all"> 
			<div class="img"><a></a></div> 
			<div class="img"><a></a></div> 
		</div>

Answer 3

Это можно сделать с помощью box-shadow и Javascript. https://codepen.io/anon/pen/xdQbQB

При просмотре обязательно нажать "На всю страницу" для правильного отображения эффекта освещения.

$(".bulb").hover(function() { 
  $(this).addClass('active'); 
  $('.light:has(>.active)').addClass('shadow'); 
  $('#outer').addClass('picture'); 
}); 
 
$(".bulb").mouseout(function() { 
  $('#outer').removeClass('picture'); 
  $('.shadow').removeClass('shadow'); 
  $(this).removeClass('active'); 
});
#outer, body{ 
  height: 100vh; 
  background-color: black; 
} 
 
#outer, .light { 
  display: flex; 
  justify-content: space-around; 
  flex-direction: row; 
  align-items: center; 
} 
 
.bulb { 
  height: 50px; 
  width: 50px; 
  background-color: yellow; 
  border-radius: 50%; 
  z-index: 0; 
} 
 
.shadow { 
  box-shadow: 0 0 0px 2000px black, inset 0 0 120px 120px black; 
} 
 
.light { 
  height: 400px; 
  width: 400px; 
} 
 
.picture { 
  background: url(https://c402277.ssl.cf1.rackcdn.com/photos/946/images/story_full_width/forests-why-matter_63516847.jpg?1345534028); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<div id="outer"> 
 
  <div class="light"> 
    <div class="bulb"></div> 
  </div> 
  <div class="light"> 
    <div class="bulb"></div> 
  </div> 
  <div class="light"> 
    <div class="bulb"></div> 
  </div> 
</div>

READ ALSO
Как реализовать плавающий сайдбар

Как реализовать плавающий сайдбар

Как сделать плавающий сайдбар как на сайте https://wwwcitilink

282
Как убрать hover на мобильных устройствах?

Как убрать hover на мобильных устройствах?

Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?

1960
Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли, одним запросом, получить данные из 3-х таблиц,

278
Как сделать update JTable?

Как сделать update JTable?

Можете подсказать, как обновить данные в JTable? Заранее спасибо!

392