С помощью чего можно воплотить эту идею? Имеется ввиду CSS, SVG, JPG (фон) становится видимой при наведении курсора на SVG (png) элемент. В данном случае "Лампочка" отдельный html элемент, который является ссылкой. Важный момент - лампочек может быть несколько.
11
-
1Попробуйте покрутить маски(htmlbook.ru/blog/maskirovanie-v-css). На фон картинку, а блок поверх солидно черный. Придется сильно повозится, но это будет самый гибкий и удобный вариант для вас. – Telion 20 мая '17 в 14:59
-
почему бы просто черный фон не заменить на фон картинки ? – zb' 20 мая '17 в 17:35
-
Насчёт масок думаю хорошая идея! Спасибо! Единственно хочется решить момент как сделать подмену координат фона родительского блока при наведении на вложенный див-ссылку в него. Думаю многим полезен будет этот ход. Можно сделать чтобы ряд иконок (ссылок) освещали одно изображение, а одна иконка подставляла иное изображение. Это если вдруг нужно каждой ссылке свою картинку по тематике. – Sylon 21 мая '17 в 0:00
-
1SVG маски рулят codepen.io/yoksel/full/BjRVew – отсюда – Alex78191 19 июл '17 в 9:16
-
1Виды масок codepen.io/yoksel/full/fsdbu – Alex78191 15 окт '17 в 20:50
|
показать ещё 6 комментариев
4 ответа
Это можно сделать с помощью 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: 450px;
width: 450px;
}
.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>
-
Благодарю! Но не совсем подходящий вариант. Он даёт подмену фона при наведении (эффект размытия света делается в фотошопе). Минус в том, что если лампочек будет 4, то для каждой нужно отдельный фон, в итоге имеем страницу с четырьмя тяжелыми картинками (фонами) под каждый элемент. – Sylon 20 мая '17 в 1:34
-
@Agestor вы хотите, чтобы фон через темноту поглядывал? И несколько лампочек освещали разве участки? – Alex78191 20 мая '17 в 1:55
-
-
Можно box-shadow задавать при наведении на лампочку. stackoverflow.com/questions/40992451/… – Alex78191 20 мая '17 в 2:22
-
Дело в том, box-shadow он лишь создаёт эффект наложением цвета. То есть в данном случае он никак не осветит картинку. Вообще насколько я понимаю, что возможно нужного эффекта возможно добиться только наложением дополнительных изображений, что является неудачным вариантом. Но пока в поисках решений. – Sylon 20 мая '17 в 2:37
Немножко поиграться с 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>
-
Благодарю! Скажите, пожалуйста, как этом метод с картой называется? Ответ правильный в вашем комментарии про карты. Вопрос каким образом сделать привязку общего вона и нескольких "лампочек" которые будут активировать положение фона. – Sylon 20 мая '17 в 3:23
-
Большой див position:relative с исходным фоном; в нем несколько мелких div position: absolute c hover фоном и нужными координатами. – user210322 20 мая '17 в 3:38
-
Метод никак не называется. Почесал репу - сработала смекалка. :) – user210322 20 мая '17 в 3:40
-
Было бы хорошо увидеть реализацию подмены фона (координат) при наведении на иконку (лампочку). Просто на данный момент ответ ховер на весь фон с его подменой. – Sylon 20 мая '17 в 4:45
-
Запустите в браузере - картинки я не масштабировал, а потому здесь они тупо смотрятся
.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>
-
ну или запустить на всю страницу. Красоту не наводил. Надеюсь мысль ясна. – user210322 20 мая '17 в 5:36
-
Тут получается тот же вариант, только с двумя картинками. Важный момент: есть фон, координаты указывают на черное пустое пятно, и есть ряд иконок, они отдельные html элементы, которые работают как ссылки. И вот тут не ясен момент как сделать, чтобы при наведении только на иконку менялся общий фон. – Sylon 20 мая '17 в 5:38
-
то есть чтобы при наведении на один див, hover срабатывал у другого дива? – user210322 20 мая '17 в 5:41
-
вы пишите пока мысли - присоединюсь через несколько часов. – user210322 20 мая '17 в 5:44
-
Получается, что так. Я так понимаю есть общий блок для всего этого дела с фоном черным. В нём дивы которые будут являться контейнерами для ховер изображений. Понятно, что их придётся сделать местами друг на друге потому, что свет будет затрагивать большую область вокруг лампочки. А в этом диве будет ещё один див, который будет являться ссылкой и иметь изображение в виде лампочки. Вот тут и нужно сделать, чтобы при наведении на эту ссылку (в рамках лампочки) менялся фон. – Sylon 20 мая '17 в 5:48
$("#ajaxBtn").click(function(){
var inputText = $("#testText").val();
$.ajax({
type: "POST",
url: "index.php",
data: "testAjax="+inputText,
dataType: "html",
success: function(html){
alert(html);
}
});
});