Курсор и прозрачность в css

152
17 мая 2019, 01:20

У меня есть html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainvisual.css" rel="stylesheet" type="text/css">
<link href="main.scss" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="bg" alt="background"><img src="images/bg.png"></div>
</body>
</html>

У меня есть вот часть css кода:

@charset "utf-8";
/* CSS Document */
body {
    background-color: #000000;
}
.bg{
    display: flex;
    content: "";
    justify-content:flex-end;
    z-index: -1;
    opacity: .1;
}
bg:hover{
    opacity: 1;
}

Я хочу сделать так, чтобы когда я двигалась курсором по экрану, у меня затемненная картинка bg.png с прозрачностью 0,1 становился 1 в радиусе 15 px от курсора. Как это можно реализовать? На картинку надо наложить маску svg и использовать псевдокласс hover? Или как?

READ ALSO
Правильный выбор breakpoint css
HTML

Правильный выбор breakpoint css

в psd макетах: Десктоп - ширина контейнера 1180px, мобильные - ширина контейнера 420pxДумаю, что проще будет, с учетом распространенных разрешений...

 166
Как спрятать стрелки карусели на WP?
jQuery

Как спрятать стрелки карусели на WP?

Есть карусель постов на WordPressВыводит посты с помощью доп

 193
Имитация клика при загрузке страницы
jQuery

Имитация клика при загрузке страницы

Есть код, который имитирует клик на ссылку при полной прогрузке страницыПо идее стоит таймаут, а не интервал, но клик всё равно повторяется...

 134
Как подтвердить получение данных на COM-порту
c#

Как подтвердить получение данных на COM-порту

Пришлось работать с COM-портомОднако устойчивой работы добиться не удалось

 217