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

209

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? Или как?