CSS-переход: плавное изменение фона с помощью opacity

Вы можете использовать CSS для создания эффекта изменения прозрачности при наведении на изображение и соответствующей смены фона контейнера. Вот пример кода, который демонстрирует это:

.container {
    display: inline-block;
    padding: 5px; /* Добавлено отступ для визуализации фона при полной непрозрачности изображения */
    background-color: black;
    opacity: 1;
}

.container:hover {
    background-color: red; /* При наведении фон контейнера меняется на красный */
}

img {
    opacity: 1; /* Исходная непрозрачность изображения */
}

img:hover {
    opacity: 0.7; /* При наведении на изображение оно становится полупрозрачным */
}

.transition {
    transition: all .25s ease-in-out; /* Плавный переход для всех изменений */
    -moz-transition: all .25s ease-in-out; /* Для Firefox */
    -webkit-transition: all .25s ease-in-out; /* Для WebKit браузеров */
}

В этом примере, когда вы наводите курсор на изображение, его непрозрачность уменьшается до 0.7, а фон контейнера меняется на красный. При этом добавлен класс .transition для создания плавного перехода. Так что вам следует применить этот класс к элементу img для более плавного эффекта при изменении стилизации.

Не забудьте подключить CSS-класс .transition к вашим изображениям, чтобы эффект срабатывал. Надеюсь, это поможет!

Пожалуйста, обратите внимание, что проблема не в цвете white, а в том, что элемент прозрачный.

Когда элемент становится прозрачным, все его дочерние элементы наследуют изменённый уровень непрозрачности; альфа-фильтр в IE 6, 7 и т.д. также получает новое значение.

Таким образом, нельзя утверждать, что он белый!

Вы можете разместить другой элемент поверх него и установить этому элементу уровень непрозрачности 1, в то время как уровень прозрачности изображения можно установить на .2 или любое другое значение, которое вам нужно.