Форум

wayrus161 · #1 (**permalink**) 31.08.2018, 00:38

Доброго времени суток, дорогие форумчане!

Я недавно занялся версткой и возник у меня такой вопрос:
как реализовать замыливание нескольких других элементов при наведение на определенный элемент?

Прошу прощения за тупость, но я пока новичок в этом :

Может это возможно сделать и средствами CSS?)
Вообщем, буду очень благодарен за помощь

рони · #2 (**permalink**) 31.08.2018, 01:40

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>

wayrus161 · #3 (**permalink**) 31.08.2018, 07:20

Спасибо большое))

Форум

Справочник

Discord чат

Курсы javascript