Замыливание нескольких div-ов при наведении на один из элементов
Доброго времени суток, дорогие форумчане! :victory:
Я недавно занялся версткой и возник у меня такой вопрос: как реализовать замыливание нескольких других элементов при наведение на определенный элемент? Прошу прощения за тупость, но я пока новичок в этом ::blink: :) Может это возможно сделать и средствами CSS?) Вообщем, буду очень благодарен за помощь :) |
css hover sun light js
wayrus161,
5 приемов работы с CSS, о которых вам следует знать 4. Контент, вырванный из контекста
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Flashlight effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Sawarabi Mincho', sans-serif;
}
body {
background: #302015;
overflow: hidden;
position: relative;
}
.custom-grid {
position: relative;
max-width: 50rem;
margin: 2rem auto;
text-align: center;
}
.custom-grid > .item {
display: inline-block;
margin: .4rem .2rem;
border: 2px solid #BA8E59;
}
.custom-grid > .item > .text {
position: relative;
z-index: 1;
color: #eee;
padding: 1rem;
}
.shadow {
transition: opacity .3s;
position: absolute;
left: 50%;
top: 50%;
height: 200vh;
width: 200vw;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: radial-gradient(circle at center, transparent 0%, transparent 5%, #302015 10%, #150E09 100%);
}
.shadow.min {
opacity: 0;
}
</style>
</head>
<body translate="no" >
<div class="custom-grid" id="js-grid">
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="shadow min"></div>
<script >
var shadow = document.querySelector('.shadow');
document.addEventListener('mousemove', function (e) {
if(e.target.closest('.custom-grid')) {
shadow.classList.remove("min");
window.requestAnimationFrame(function () {
shadow.style.left = e.clientX + 'px';
shadow.style.top = e.clientY + 'px';
});
}
else shadow.classList.add("min");
});
</script>
</body>
</html>
|
Спасибо большое))
|
| Часовой пояс GMT +3, время: 20:25. |