Свечение блока DIV при движении мыши

Красивый эффект для сайта который создает свечение при наведение мыши на блок DIV. Можно использовать для оформления сайтов лендингов и страничек.

Данный эффект будет  выполнен  с использованием нескольких строчек JS и не потребует дополнительных библиотек.  Можно применять к любым блокам и секциям в любом количестве на сайте. 

Установка на сайт не займет много времени. Если конечно Вы хоть немного знаете CSS.

Код HTML свечения блока

Этот код Вам надо вставить там,где хотите видеть эти блоки с подсветкой. Но это просто пример, Вы сможете данный эффект применить и к другим блокам DIV.

<div class="cards">
    <div class="card">
        <div class="card-image">
            <i class="fa fa-user"></i>
        </div> 
        <div class="card-content">  
            <div class="card-title">
                Font Awesome
            </div>
            <div class="card-text">
                Иконка установлена графическим шрифтом
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <img src="card-icon.png" />
        </div> 
        <div class="card-content">
            <div class="card-title">
                IMG
            </div>
            <div class="card-text">
                Иконка установлена графическим файлом.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.47 360.25c-1.56-.82-32.39-16.89-76.78-25.81 64.25-75.12 84.05-161.67 84.93-165.64 1.18-5.33-.44-10.9-4.3-14.77-3.03-3.04-7.12-4.7-11.32-4.7-1.14 0-2.29.12-3.44.38-3.88.85-86.54 19.59-160.58 79.76.01-1.46.01-2.93.01-4.4 0-118.79-59.98-213.72-62.53-217.7A15.973 15.973 0 0 0 256 0c-5.45 0-10.53 2.78-13.47 7.37-2.55 3.98-62.53 98.91-62.53 217.7 0 1.47.01 2.94.01 4.4-74.03-60.16-156.69-78.9-160.58-79.76-1.14-.25-2.29-.38-3.44-.38-4.2 0-8.29 1.66-11.32 4.7A15.986 15.986 0 0 0 .38 168.8c.88 3.97 20.68 90.52 84.93 165.64-44.39 8.92-75.21 24.99-76.78 25.81a16.003 16.003 0 0 0-.02 28.29c2.45 1.29 60.76 31.72 133.49 31.72 6.14 0 11.96-.1 17.5-.31-11.37 22.23-16.52 38.31-16.81 39.22-1.8 5.68-.29 11.89 3.91 16.11a16.019 16.019 0 0 0 16.1 3.99c1.83-.57 37.72-11.99 77.3-39.29V504c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-64.01c39.58 27.3 75.47 38.71 77.3 39.29a16.019 16.019 0 0 0 16.1-3.99c4.2-4.22 5.71-10.43 3.91-16.11-.29-.91-5.45-16.99-16.81-39.22 5.54.21 11.37.31 17.5.31 72.72 0 131.04-30.43 133.49-31.72 5.24-2.78 8.52-8.22 8.51-14.15-.01-5.94-3.29-11.39-8.53-14.15z"/></svg>
        </div> 
        <div class="card-content">
            <div class="card-title">
                SVG
            </div>
            <div class="card-text">
                Иконка установлена SVG-кодом.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg> 
        </div> 
        <div class="card-content">
            <div class="card-title">
                Длинный заголовок, который не умещается на одну строку
            </div>
            <div class="card-text">
                Описание блока
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"/></svg>
        </div> 
        <div class="card-content">
            <div class="card-title">
                IMG
            </div>
            <div class="card-text">
                <p>Текст в параграфе &lt;p&gt;</p>
                <p>Еще описание</p>
            </div>
        </div>
    </div>
</div>

Код CSS свечения блока DIV

.cards {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    background: url(background.jpg);
    background-size: cover;
    background-position: center;
    margin: 20px 0;  
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.cards:hover .card:after {
    opacity: 1;
}
.cards .card {
    background-color: #4f93ce;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: calc(33.333% - 20px);
    margin: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    opacity: 0.95;
}
@media screen and (max-width: 767px) {
    .cards .card {
        width: calc(50% - 20px);
    }
}
@media screen and (max-width: 520px) {
    .cards .card {
        width: calc(100% - 20px);
    }
}
.cards .card:hover:before {
    opacity: 1;
}
.cards .card:before,
.cards .card:after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}
.cards .card:before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.4), transparent 40%);
    z-index: 3;
}
.cards .card:after {  
    background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.9), transparent 40%);
    z-index: 1;
}
.cards .card .card-content {
    background-color: #337AB7;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 78px 16px 16px;
    z-index: 2;
    height: 100%;
    line-height: 1.2;
    margin: 2px;
}
.cards .card .card-image {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);    
    z-index: 10;
}
.cards .card .card-image i {
    font-size: 64px;
    color: #16354f;
}
.cards .card .card-image img {
    height: 64px;
}
.cards .card .card-image svg {
    height: 64px;
    fill: #16354f;
}
.cards .card .card-title {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding: 10px 0;
    color: #BFE2FF;
    text-transform: uppercase;
    font-weight: 600;
}
.cards .card .card-text,
.cards .card .card-text p {
    font-size: 15px;
    font-family: Verdana, sans-serif;
    color: #FFF;
    margin: 0;
}
.cards .card .card-text p:not(:last-child) {
    margin-bottom: 10px;
}

Ну и напоследок, необходимо подключить сам скрипт для эффекта свечения блока.

let cards = document.querySelectorAll(".cards");    
for( let i = 0; i < cards.length; i++){
    cards[i].onmousemove = e => {
        for(const card of document.getElementsByClassName("card")) {
            const rect = card.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;
            card.style.setProperty("--mouse-x", `${x}px`);
            card.style.setProperty("--mouse-y", `${y}px`);
        };
    }
}

Скрипт также можно вставить и на страницу,обернув его вот так:

 (<script> тут скрипт </script>)

Посмотреть демо