Как я могу решить эту проблему с помощью моего CSS/HTML-кода? ⇐ CSS

[Anonymous]

Я работаю над веб-сайтом, на котором можно играть в игры, и не могу решить эту проблему с фоновым изображением игровой карточки.

Код: Выделить всё

.featured-game {
background-color: rgb(25, 25, 25);
border-radius: 15px;
box-shadow: 0 0 25px rgba(47, 120, 255, 0.25);
transition: all 0.3s ease;
cursor: pointer;
border-style: solid;
border-width: 2px;
border-color: rgb(47, 120, 255);
display: flex;
align-items: center;
justify-content: center;
font-size: 75px;
text-decoration: none;
font-family: 'Bebas Neue', serif;
color: rgba(255, 255, 255, 0);
overflow: hidden;
}

.featured-game:hover {
box-shadow: 0 0 25px rgba(47, 120, 255, 0.75);
transform: scale(1.05);
color: rgb(255, 255, 255);
}

.featured-game:hover .game-icon-background {
filter: brightness(0.5) blur(5px);
}

.game-icon-background {
background-size: cover;
transition: all 0.3s ease;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

Код: Выделить всё

[url=#]
SLOPE

[/url]

Вот результат:
Наведение курсора мыши:
одна игра под названием «Склон» находится в выделенном поле слева, остальные пять полей в этом разделе пусты.
Выход мышью:
A фон с изображением игры «Склон» с серыми прямоугольниками посередине
Я попробовал изменить положение фона, а также немного повозился с HTML.
Фон игровой карточки по-прежнему должен быть того же размера, что и это когда вы наводите курсор мыши, но без каких-либо фильтров и текста.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -html-code