Как сделать градиент при наведении

Вы можете использовать псевдокласс :hover для наложения градиента на картинку при наведении мыши. Для этого нужно использовать свойство background-image и функцию linear-gradient().

Пример CSS-кода:

/* Стили для картинки */
.image-container {
position: relative;
display: inline-block;
}

.image {
display: block;
width: 100%;
}

/* Стили для градиента */
.gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/* Стили для кнопки проигрывателя */
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/* Стили для названия игры */
.game-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/* Стили для наведения */
.image-container:hover .gradient {
opacity: 1;
}

.image-container:hover .play-button {
opacity: 1;
}

.image-container:hover .game-title {
opacity: 1;
}


HTML-код:

<div class="image-container">
<img src="your-image-url.jpg" alt="" class="image">
<div class="gradient"></div>
<button class="play-button">Play</button>
<div class="game-title">Game Title</div>
</div>

В этом примере градиент наложится на картинку при наведении мыши, кнопка проигрывателя и название игры станут видимыми также при наведении мыши.