Float chat

Форум

Главная Вебмастерам Бесплатные скрипты на PHP, Perl, Java и т.д. Показ описания при наведении курсора на картинку - на CSS
1 ответ(a) в теме
Admin
не в сети 2 дня
На сайте с 13.01.2015
Администратор
Титул: Местный житель
58%
79
Тем 49
Сообщения 62

Объявление 

1
14:59

Данным способом можно организовать появление блока с текстом поверх изображения (не выходя за его границы) при наведении на это изображение, используя только CSS. Пример использования

Вы не можете просматривать опубликованные ссылки

.

HTML - внутри первого блока div размещается второй:

Спойлер
<div class="block_1"><img src="ссылка на изображение" alt="" />
<div class="block_2">
<a href="ссылка" target="_blank">Ваш текст (появляющийся при наведении на изображение).</a>
</div>
</div>

CSS - стили для блоков (подгоняются под свои):

Спойлер
.block_1{
    position:relative;
    margin:10px auto; /* Отступы вокруг блока */
    width:0px; /* ширина блока */
    height:0px; /* высота блока */
}
.block_2{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    top:0;
    background:rgba(255,255,255, 0.7); /* фон блока */
    padding:5px;
    display:none;
}
.block_1:hover .block_2{
    display:block;
}

0
Если возникли сложности, или есть вопросы - не стесняйтесь обращаться в приватный чат.
Вы не имеете права на публикацию сообщений в этой теме
Авторизация
*
*
Регистрация
*
*
*
Пароль не введен
Генерация пароля