Как увеличить непрозрачность для зависшего изображения в CSS

Question

Мне нужна помощь, чтобы увеличить непрозрачность изображения, отображаемого при наведении на текст. Но когда это сделано, как показано ниже, фоновый текст также отображается. Снимок экрана ниже.

Я не хочу видеть фоновый текст.

Ниже приведен код

 <div class="hover-title">Image1 Hover Test<br>
<br>
</div>
<div class="hover-image">{image 1}</div>

CSS

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    display: flex;
    pointer-events: none;
}

.hover-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Перед зависанием:

После зависания:

Answer 1

Вам нужно оба, предыдущий z-индекс, чтобы переместить что-то сзади вперед.

Позже, чтобы изменить непрозрачность, вы можете добавить цветовой слой поверх изображения, используя это:

background-color: rgba (7,52,76, .5);

Необходимо, чтобы RGB был полупрозрачным.

Подробнее об этом: Как наложить изображение на цвет в CSS?

Надеюсь, это поможет

Answer 2

In css изменить z-index из .hover-image на 2 .