Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Сниппеты » Всплывающая подпись к картинке при наведении с помощью CSS3

Всплывающая подпись к картинке при наведении с помощью CSS3

Готовых решений создания динамичных подписей к картинкам, появляющихся при наведении курсора на тело , существует на сегодняшний день предостаточно. Однажды мы уже рассматривали один замечательный вариант, подробнейшим образом. Все они хороши по своему, какие-то отличаются простотой исполнения, другие наличием различных эффектов появления подписей. В общем, кому оно надо, тот всегда сможет найти для себя подходящий вариант.

Сегодня хочу продемонстрировать ещё один, наверное один из самых простейших примеров, реализации всплывающей подписи к изображению при наведении, выполненный исключительно средствами CSS3, без подключения javascript.

 
Подпись к картинке при наведении

 
Посмотреть результат, а также поэкспериментировать с параметрами, вы можете непосредственно в онлайн-редакторе, представленном ниже:
 

 

HTML Разметка

<div class="thumbs">
    <img src="http://dbmast.ru/files/responsive-images-demo/images/image02.jpg"/>
    <div class="caption">
        <span class="title">Заголовок картинки</span>
        <span class="info">Краткое описание или анонс записи</span>
    </div>
</div>

Стили CSS

.thumbs {
  width: 100%;
  max-width: 450px; /* опционально */
  margin: 10px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.thumbs img {
  display: block;
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.thumbs .caption {
  width: 100%;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.thumbs .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.thumbs .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
}
.thumbs .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
  opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
  top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
  top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

Очень надеюсь, что этот небольшой набор правил CSS (сниппет), кому-нибудь да пригодится в работе. Возникнут какие-либо вопросы, или всплывёт какая-то ошибка, пишите в комментариях.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

51 комментарий
  1. web11:

    Спасибо, добавил в закладки

    Ответить
  2. Еще одна полезная штука =)

    Я уже соскучилась даже по новым записям))

    Спасибо)

    Ответить
  3. Дима:

    Спасибо, добавил себе

    Ответить
  4. Виталий:

    Доброго дня.

    Уже 3 дня и 3 ночи бьюсь — не могу понять, как вставить необходимую картинку или как применить эффект к конкретной картинке. Подскажите, пожалуйста!

    Ответить
  5. Кнстантин:

    У меня данный пример отображается как два отдельных блока, один под другим.

    блок с картинкой и ниже блок с текстом.

    Ответить
    • Андрей:

      Попробуйте использовать код из онлайн-редактора (шаблон изобр-я перед /* html разметка */ — переключатель html), либо самостоятельно поэкспериментировать с вложенностью /**/.

      Ответить
  6. Спасибо, обновил дизайн изображений на своем сайте)

    Ответить
  7. Анастасия:

    Подскажите пожалуйста, воспользовалась вашим кодом,всё получилось. Но у меня на сайте эта картинка должна стоять посередине,пытаюсь её сместить ,выходит только справа или слева(

    И рядом с картинкой должен быть текст справа или слева(тоже не получается( смещается или вверх или вниз(

    Ответить
  8. dimogur:

    Почему две картинки друг про другом, почему сразу правильный код в примере указать нельзя? найди ошибку называется!

    Ответить
    • driver:

      Где вы в примере увидели две картинки? Код в примере правильный, именно для демонстрации одной картинки. Если вы не в состоянии выстроить изображения в ряд, то просто спросите, а не гните пальцы.

      Добавьте в стили:

      .img_block{float:left;margin: 5px}

      С маржой определитесь как вам нуна, 5px это в качестве примера. Живой пример: тынц

      Ответить
  9. Westus:

    У меня тень накладывается и на всплывающий текст. Как исправить?

    Ответить
    • driver:

      Значение свойства z-index у тени .over_block должно быть меньше чем у текста в теге span

      Ответить
  10. Андрей:

    Здравствуйте! Ув. driver

    Подскажите как с Вами можно связаться? Помощь Ваша нужна. Спасибо!

    Ответить
  11. Светлана:

    еще бы знать куда это вписывать, перед или после каких слов? Пользуюсь BLOGGER

    Ответить
  12. Алёна:

    Здравствуйте. Скажите как сделать что бы было допустим три картинки по горизонтали и выровнено по центру страницы, у меня не как не получается это организовать в стилях прописала .img_block{float:left;margin: 5px} картинки выровнены в одну строку, но прилипает первая к левому краю страницы!

    Посоветуйте как мне поступить заранее Вам благодарна за помощь!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru