Как отобразить окно с информацией при наведении курсора на изображение?" ⇐ CSS

[Anonymous]

Изображение появляется, но в информационном поле появляется примечание. Это код для веб- и мобильного приложения. Я просто хочу показать дополнительную информацию об изображении, когда пользователь щелкнет мышью или проведет пальцем по изображению.

Код: Выделить всё

        .container {
position: relative;
display: inline-block;
}

.info-box {
visibility: hidden;
width: 200px;
background-color: #f9f9f9;
color: #333;
text-align: center;
border-radius: 5px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.container:hover .info-box,
.container img:hover + .info-box {
visibility: visible;
}

Код: Выделить всё

[img]https://m.media-amazon.com/images/I/81YFrKSH40L._AC_UF894,1000_QL80_.jpg[/img]


Título da Informação
Descrição da informação.

Подробнее здесь: https://stackoverflow.com/questions/784 ... r-an-image