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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»