Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Появляющееся описание у картинок

Доброго времени суток, друзья, читатели и гости блога. Как сделать описание у картинки при наведении на неё курсора. Для тех кто публикует много фотографий у себя в блоге, такое появляющийся текст будет очень уместен. Вариантов появляющегося описания к изображениям достаточно много. Вот один из примеров.

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

Сегодня сделаем вот такое пояснение к фотографии. Наведите курсор на картинку.


Бирманская курносая обезьяна обитает исключительно в северной Бирме.Из-за особенностей строения носа чихает во время дождя.

В Блоггере это можно реализовать прямо в редакторе сообщений. В режиме HTML.

Код для этого.
<style type="text/css">
.VVB{
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.VVB:hover {cursor: pointer;}
.VVB img {
  border: none;
  margin: 0;
  padding: 5px;
}
.VVB .desc {display: none;}
.VVB:hover .desc {
  background-color:#345;
  display: block;
  margin: 0;
  color: #FFF;
  font-size: 14px;
  padding: 10px;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
}
.VVB:hover .desc strong {
  display: block;
  font-size: 16px;
  line-height: 1em;
}
</style>

<div class="VVB">
<img border="0" height="300" src="https://img-fotki.yandex.ru/get/6803/247542278.0/0_114916_371d91b_S  " width="290" />
    <br />
<div class="desc">
<strong>Бирманская курносая обезьяна </strong>обитает исключительно в северной Бирме.Из-за особенностей строения носа чихает во время дождя.</div>
</div>
</center>


В строку, выделенную синим цветом, вставляйте адрес вашей картинки. Красным обозначен заголовок картинки. Жёлтым её полное описание.

Сегодня у меня всё. Всем удачи. Благодарю за внимание.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


3 комментария:

  1. Вика, добрый день! Скажите, знаете ли вы какие-либо формы для размещения анонсов статей на сайте, может подскажите?

    ОтветитьУдалить
    Ответы
    1. Николай, я вообще даже и не встречала такое. Или я не совсем Вас поняла. Можно конечно сделать какое-то всплывающее окно с анонсом на конкретную статью. Или я не о том.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML