Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

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

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

 

HTML Разметка

<div class="thumbs">
    <img src="/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 (сниппет), кому-нибудь да пригодится в работе. Возникнут какие-либо вопросы, или всплывёт какая-то ошибка, пишите в комментариях.

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

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

Всего комментариев: 65

  • web11: 9 октября, 2014 в 01:07

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

    Ответить
  • Анастасия: 9 октября, 2014 в 15:56

    Еще одна полезная штука =)
    Я уже соскучилась даже по новым записям))
    Спасибо)

    Ответить
    • driver: 9 октября, 2014 в 18:01

      Спасибо Анастасия за отзыв.

      Ответить
  • Дима: 28 марта, 2015 в 07:09

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

    Ответить
  • Виталий: 14 апреля, 2015 в 00:27

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

    Ответить
    • Андрей: 21 апреля, 2015 в 19:39

      Замените урл из примера (placehold.it/250×250″) на адрес расположения Вашего изображения.

      Ответить
      • Виталий: 22 апреля, 2015 в 06:05

        Спасибо!

        Ответить
  • Кнстантин: 30 апреля, 2015 в 02:39

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

    Ответить
    • Андрей: 30 апреля, 2015 в 14:40

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

      Ответить
  • Пульсар: 17 мая, 2015 в 21:20

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

    Ответить
  • Анастасия: 2 июня, 2015 в 14:53

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

    Ответить
  • dimogur: 1 августа, 2015 в 20:17

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

    Ответить
    • driver: 1 августа, 2015 в 21:07

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

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

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

      Ответить
      • James Bond: 17 марта, 2018 в 17:57

        Спасибо огромное!
        Именно то, что хотел!

        Ответить
  • Westus: 29 августа, 2015 в 17:48

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

    Ответить
    • driver: 29 августа, 2015 в 18:31

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

      Ответить
  • Андрей: 19 октября, 2015 в 16:17

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

    Ответить
    • driver: 19 октября, 2015 в 17:55

      Здравствуйте! Связаться со мной можно через форму обратной связи, на странице «Контакты»

      Ответить
  • Светлана: 23 ноября, 2015 в 14:06

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

    Ответить
  • Борис: 16 марта, 2016 в 11:51

    Здравствуйте, вопрос следующий: Как сделать чтобы панель выезжала сверху вниз?
    Пытался сделать, она выезжает, но содержимое span всегда выводится…
    Как я сделал

    Ответить
    • driver: 16 марта, 2016 в 15:56

      Здравствуйте, Борис.
      Примерно так: см. пример

      Ответить
      • Борис: 17 марта, 2016 в 09:27

        Спасибо, за помощь!

        Ответить
  • Karat7: 8 апреля, 2016 в 17:34

    Сверху бы еще текста добавить на всплывающем фоне.

    Ответить
  • Александр: 30 июня, 2016 в 13:19

    Здравствуйте. Я только учусь — хочу сделать карту регионов РФ, чтоб при наведении на регион появлялось его название.

    Ответить
  • Артем: 23 июля, 2016 в 15:32

    Здравствуйте.Как сделать чтоб фон который появляется как и подсказка были круглыми ?

    Ответить
  • Дмитрий: 21 августа, 2016 в 14:05

    Добрый день,
    А вас не смущает использование блочного элемента внутри строчного ?

    Ответить
    • driver: 21 августа, 2016 в 19:43

      День добрый.
      Да конечно, банальная невнимательность, для примера планировал обнести ссылкой только картинку или разместить ссылку в подписи. Дабы не смущать смущаемых, исключил ссыль из примера.

      Ответить
  • Михаил: 10 октября, 2016 в 00:31

    Огромное спасибо!
    Отличная фишка!
    Всё работает)

    Ответить
  • Андрей: 2 ноября, 2016 в 09:59

    Дружище! Фишка крутая бесспорно, но я не могу понять куда ссылку ткнуть( Ну то есть мне нужно что бы при клике на изображение можно было перейти на другую страницу сайта

    Ответить
    • driver: 2 ноября, 2016 в 11:20

      Просто обнесите ссылкой картинку:
      <a href="адрес сайта"><img src="ваша картинка"></a>

      Ответить
  • Алёна: 15 ноября, 2016 в 06:00

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

    Ответить
  • MARSHAL327: 20 мая, 2017 в 16:37

    Здравствуйте, у меня такая ситуация есть четыре картинки, надо сделать так чтобы две картинки были на одной строчке, а другие две на другой строчке.

    Ответить
    • driver: 20 мая, 2017 в 18:00

      Здравствуйте, примерно так: см.пример

      Ответить
      • MARSHAL327: 20 мая, 2017 в 18:42

        большое спасибо!

        Ответить
  • Ната: 2 июля, 2017 в 20:07

    Добрый день!
    Вы меня простите, но я вообще полный чайник в этой теме (только ради сайта приходится вникать во все эти айтишные вещи).
    Если есть возможность, подскажите в какой файл вордпресс вставить вот это:
    Заголовок картинки
    Краткое описание или анонс записи

    Ответить
  • Ната: 2 июля, 2017 в 20:12

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

    Заголовок картинки
    Краткое описание или анонс записи

    Ответить
  • Ната: 2 июля, 2017 в 20:13

    В общем html разметку)

    Ответить
    • driver: 2 июля, 2017 в 21:04

      Здравствуйте, Ната.
      Поверьте, на данном этапе, вашему блогу не нужны такие плюшки, всё и так выглядит вполне гармонично с содержанием. Развернёте галерею, или будете использовать изображения в качестве превьюшек для статей, тогда и прикрутите какую-нибудь фишку вроде этой, или же воспользуетесь специальным плагином, коих предостаточно наштамповано для wp.
      А пока, пишите, у вас это получается )).

      Ответить
      • Ната: 2 июля, 2017 в 21:23

        Спасибо вам большое за вдохновляющий ответ!) Постараюсь воспользоваться вашим советом)

        Ответить
  • Вадим: 10 июля, 2017 в 12:22

    Добрый день! не подскажите как сделать что бы и картинка и внизу выезжающее поле с надписью были ссылками? так как если ставлю ссылку на картинку то нижняя область не кликабельна. заранее спасибо!

    Ответить
    • driver: 11 июля, 2017 в 20:04

      День добрый.
      Самое простое, это всё что внутри div class="thumbs" «обнести» ссылкой, включая картинку и div с подписью

      Ответить
  • Дмитрий: 8 августа, 2017 в 18:59

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

    Ответить
    • driver: 8 августа, 2017 в 19:39

      Примерно так: см.пример

      Ответить
      • Дмитрий: 8 августа, 2017 в 19:59

        Спсибо большое, а как еще оставить затемнение как при появлении hover? На светлых картинках текст не видно.

        Ответить
  • Игорь: 7 сентября, 2017 в 02:09

    Спасибо! отлично подошло, подскажите, как можно сделать чтобы всплывающая запись не перекрывала ссылку? то есть моя картинка, на которую наложил подпись, это и есть ссылка, и там где запись вылезает, уже по ссылке не перейти, картинка становится некликабельной.

    Ответить
    • driver: 7 сентября, 2017 в 21:15

      Отвечал на подобный вопрос ранее: тынц

      Ответить
      • Игорь: 7 сентября, 2017 в 22:11

        Упс, спасибо) заработало, не заметил что есть комменты на других страницах.

        Ответить
  • Никита: 11 сентября, 2017 в 01:28

    Андрей, приветствую!
    Как отрегулировать настройки сниппета для фотографии с параметрами: width=”938″ height=”369″? Пробовал, но не получилось. Может ли поле с текстом быть ссылкой, или только вся картинка в целом?
    Благодарю за ресурс.
    С уважением etc)

    Ответить
  • Одесса-мама: 26 октября, 2017 в 22:32

    А, как сделать, чтоб текст всплывал облаком в определенном месте?

    Ответить
  • Андрей: 5 декабря, 2017 в 06:16

    здравствуйте! Скажите как сделать с помощью css всплывающую картинку, но так что бы при увеличении под низом были маленькие другие картинки, которые при выборе их открывались вместо той которая показана при нажатии, типа как на сайтах продажи авто

    Ответить
  • Георгий: 29 октября, 2018 в 20:09

    Столкнулся со странностью.
    В разных браузерах ведет себя по разному.
    В опера меняет размер картинки, но описание дает под ней.
    В хроме и эксплорере все работает, но невозможно поменять размеры картинки.
    Как решить?

    Ответить
  • Антон: 5 февраля, 2019 в 14:27

    зачем двойные тени в box-shadow?

    Ответить
  • Егор: 20 февраля, 2019 в 17:38

    Добрый день!
    Как можно сделать, чтоб надпись появлялась из центра, а не снизу?

    Ответить
    • driver: 21 февраля, 2019 в 01:49

      Примерно так: тынц
      Рамку, при желании, можно убрать, исключив свойство border из селектора .img-box:after

      Ответить
  • Ксения: 8 мая, 2019 в 16:03

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

    Ответить
  • Валерий: 1 июня, 2019 в 20:47

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

    Ответить
    • driver: 1 июня, 2019 в 22:47

      Здравствуйте!
      Найдите селектор .thumbs .caption .title и определите пару свойств:
      top: 0;
      opacity: 1;

      Получится примерно так: Тынц
      С цветом текста, фоном, отступами, позиционированием заголовка и описания(поменять местами, например), думаю разберётесь сами, выставите в соответствии с вашими требованиями.
      Так же можете изучить урок по фиксированным подписям к изображениям, взяв за основу оба этих решения, с подписями можно будет вытворять всё что угодно.

      Ответить
      • Валерий: 2 июня, 2019 в 12:45

        Добрый день!
        Неожиданно быстрый и исчерпывающий ответ. Благодарю!

        Ответить
  • Георгий: 10 июня, 2019 в 16:58

    День добрый.
    На картинке снизу появилась полоса, хотя на первоисточники этого нет. Вопрос, как убрать полосу
    ?

    Ответить
  • Георгий: 11 июня, 2019 в 12:02

    День добрый.
    Подскажите как избавиться от белой рамки в низу изображения.

    Ответить
  • Аня: 1 ноября, 2019 в 15:37

    а как создать сам дизайн этого окна в photoshop cc!?? скажите, пожалуйста.
    или, может, его можно создать, как pop up??

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>