Несколько возможных причин, по которым прозрачность элемента может исчезать при наведении курсора:

• Неправильное задание свойства opacity. 2 Например, если при наведении на элемент задаётся свойство opacity, которое полностью перекрывает картинку, то, возможно, оно задано неправильно. 2 Для решения проблемы можно использовать свойство :hover с параметрами rgba(цвет, opacity 0,5). 2
• Применение последнего эффекта hover к дочернему элементу. 3 Если при наведении на один элемент наводится и на другой, то к первому применится последний эффект hover, даже если для него задано другое свойство opacity. 3 Чтобы решить проблему, можно задать для свойства opacity в состоянии hover !important. 3

Для решения проблемы с исчезновением прозрачности элемента при наведении курсора также можно подготовить два изображения — под курсором и нет, а затем использовать управляемое изображение. 5