Эффекты наведения в html и css работают неправильно ⇐ CSS

[Anonymous]

Интересно, может ли кто-нибудь помочь. Я создаю страницу сайта под названием «услуги». У меня есть столбец изображений. При наведении курсора мыши на изображение изображение должно стать полупрозрачным, а в центре должно появиться текстовое поле с названием службы. Функция прозрачности работает нормально, но при наведении курсора мыши на каждое изображение название службы отображается только на первом верхнем изображении. См. ниже мой код html и css. Заранее спасибо

Джон Смит Главная страница О Проекты Услуги Контактная информация Услуги

Дизайн продукта

Цифровой графический дизайн

Веб-разработка

Общее программирование

Сеть и ОС //CSS:
.col1 { максимальная ширина: 100%; } .col1 изображение { высота: 100%; ширина: 50%; непрозрачность: 1; переход: легкость 0,5 с; обратная видимость: скрыта; } .col1:наведите изображение { непрозрачность: 0,3; } .середина { переход: легкость 0,5 с; непрозрачность: 0; позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); -ms-transform: транслировать(-50%, -50%); выравнивание текста: по центру; } .col1:hover .middle { непрозрачность: 1; } .текст { цвет фона: черный; белый цвет; размер шрифта: 16 пикселей; отступы: 16 пикселей 32 пикселей; }