Всплывающая подпись к картинке при наведении с помощью 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 (сниппет), кому-нибудь да пригодится в работе. Возникнут какие-либо вопросы, или всплывёт какая-то ошибка, пишите в комментариях.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Спасибо, добавил в закладки
Еще одна полезная штука =)
Я уже соскучилась даже по новым записям))
Спасибо)
Спасибо Анастасия за отзыв.
Спасибо, добавил себе
Доброго дня.
Уже 3 дня и 3 ночи бьюсь — не могу понять, как вставить необходимую картинку или как применить эффект к конкретной картинке. Подскажите, пожалуйста!
Замените урл из примера (placehold.it/250×250″) на адрес расположения Вашего изображения.
Спасибо!
У меня данный пример отображается как два отдельных блока, один под другим.
блок с картинкой и ниже блок с текстом.
Попробуйте использовать код из онлайн-редактора (шаблон изобр-я перед /* html разметка */ — переключатель html), либо самостоятельно поэкспериментировать с вложенностью /**/.
Спасибо, обновил дизайн изображений на своем сайте)
Подскажите пожалуйста, воспользовалась вашим кодом,всё получилось. Но у меня на сайте эта картинка должна стоять посередине,пытаюсь её сместить ,выходит только справа или слева(
И рядом с картинкой должен быть текст справа или слева(тоже не получается( смещается или вверх или вниз(
Почему две картинки друг про другом, почему сразу правильный код в примере указать нельзя? найди ошибку называется!
Где вы в примере увидели две картинки? Код в примере правильный, именно для демонстрации одной картинки. Если вы не в состоянии выстроить изображения в ряд, то просто спросите, а не гните пальцы.
Добавьте в стили:
.img_block{float:left;margin: 5px}
.img_block{float:left;margin: 5px}
С маржой определитесь как вам нуна, 5px это в качестве примера. Живой пример: тынц
Спасибо огромное!
Именно то, что хотел!
У меня тень накладывается и на всплывающий текст. Как исправить?
Значение свойства z-index у тени .over_block должно быть меньше чем у текста в теге span
Здравствуйте! Ув. driver
Подскажите как с Вами можно связаться? Помощь Ваша нужна. Спасибо!
Здравствуйте! Связаться со мной можно через форму обратной связи, на странице «Контакты»
еще бы знать куда это вписывать, перед или после каких слов? Пользуюсь BLOGGER
Здравствуйте, вопрос следующий: Как сделать чтобы панель выезжала сверху вниз?
Пытался сделать, она выезжает, но содержимое span всегда выводится…
Как я сделал
Здравствуйте, Борис.
Примерно так: см. пример
Спасибо, за помощь!
Сверху бы еще текста добавить на всплывающем фоне.
Здравствуйте. Я только учусь — хочу сделать карту регионов РФ, чтоб при наведении на регион появлялось его название.
Здравствуйте.Как сделать чтоб фон который появляется как и подсказка были круглыми ?
Добрый день,
А вас не смущает использование блочного элемента внутри строчного ?
День добрый.
Да конечно, банальная невнимательность, для примера планировал обнести ссылкой только картинку или разместить ссылку в подписи. Дабы не смущать смущаемых, исключил ссыль из примера.
Огромное спасибо!
Отличная фишка!
Всё работает)
Дружище! Фишка крутая бесспорно, но я не могу понять куда ссылку ткнуть( Ну то есть мне нужно что бы при клике на изображение можно было перейти на другую страницу сайта
Просто обнесите ссылкой картинку:
<a href="адрес сайта"><img src="ваша картинка"></a>
Здравствуйте. Скажите как сделать что бы было допустим три картинки по горизонтали и выровнено по центру страницы, у меня не как не получается это организовать в стилях прописала
.img_block{float:left;margin: 5px}
картинки выровнены в одну строку, но прилипает первая к левому краю страницы!Посоветуйте как мне поступить заранее Вам благодарна за помощь!
Здравствуйте, у меня такая ситуация есть четыре картинки, надо сделать так чтобы две картинки были на одной строчке, а другие две на другой строчке.
Здравствуйте, примерно так: см.пример
большое спасибо!
Добрый день!
Вы меня простите, но я вообще полный чайник в этой теме (только ради сайта приходится вникать во все эти айтишные вещи).
Если есть возможность, подскажите в какой файл вордпресс вставить вот это:
Заголовок картинки
Краткое описание или анонс записи
Почему-то не отобразилось.
Если есть возможность, подскажите в какой файл вордпресс вставить вот это:
Заголовок картинки
Краткое описание или анонс записи
В общем html разметку)
Здравствуйте, Ната.
Поверьте, на данном этапе, вашему блогу не нужны такие плюшки, всё и так выглядит вполне гармонично с содержанием. Развернёте галерею, или будете использовать изображения в качестве превьюшек для статей, тогда и прикрутите какую-нибудь фишку вроде этой, или же воспользуетесь специальным плагином, коих предостаточно наштамповано для wp.
А пока, пишите, у вас это получается )).
Спасибо вам большое за вдохновляющий ответ!) Постараюсь воспользоваться вашим советом)
Добрый день! не подскажите как сделать что бы и картинка и внизу выезжающее поле с надписью были ссылками? так как если ставлю ссылку на картинку то нижняя область не кликабельна. заранее спасибо!
День добрый.
Самое простое, это всё что внутри
div class="thumbs"
«обнести» ссылкой, включая картинку и div с подписьюЗдравствуйте! Подскажите как сделать отображение постоянным, так сказать отменить действие hover?
Примерно так: см.пример
Спсибо большое, а как еще оставить затемнение как при появлении hover? На светлых картинках текст не видно.
Спасибо! отлично подошло, подскажите, как можно сделать чтобы всплывающая запись не перекрывала ссылку? то есть моя картинка, на которую наложил подпись, это и есть ссылка, и там где запись вылезает, уже по ссылке не перейти, картинка становится некликабельной.
Отвечал на подобный вопрос ранее: тынц
Упс, спасибо) заработало, не заметил что есть комменты на других страницах.
Андрей, приветствую!
Как отрегулировать настройки сниппета для фотографии с параметрами: width=”938″ height=”369″? Пробовал, но не получилось. Может ли поле с текстом быть ссылкой, или только вся картинка в целом?
Благодарю за ресурс.
С уважением etc)
А, как сделать, чтоб текст всплывал облаком в определенном месте?
здравствуйте! Скажите как сделать с помощью css всплывающую картинку, но так что бы при увеличении под низом были маленькие другие картинки, которые при выборе их открывались вместо той которая показана при нажатии, типа как на сайтах продажи авто
Столкнулся со странностью.
В разных браузерах ведет себя по разному.
В опера меняет размер картинки, но описание дает под ней.
В хроме и эксплорере все работает, но невозможно поменять размеры картинки.
Как решить?
зачем двойные тени в box-shadow?
а вот ))
Добрый день!
Как можно сделать, чтоб надпись появлялась из центра, а не снизу?
Примерно так: тынц
Рамку, при желании, можно убрать, исключив свойство
border
из селектора.img-box:after
Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы было несколько таких элементов выровненных по горизонтали?
Здравствуйте!
Подскажите, пожалуйста, как сделать, чтобы Заголовок был всегда внизу картинки, а краткое описание появлялось при наведении?
Здравствуйте!
Найдите селектор
.thumbs .caption .title
и определите пару свойств:top: 0;
opacity: 1;
Получится примерно так: Тынц
С цветом текста, фоном, отступами, позиционированием заголовка и описания(поменять местами, например), думаю разберётесь сами, выставите в соответствии с вашими требованиями.
Так же можете изучить урок по фиксированным подписям к изображениям, взяв за основу оба этих решения, с подписями можно будет вытворять всё что угодно.
Добрый день!
Неожиданно быстрый и исчерпывающий ответ. Благодарю!
День добрый.
На картинке снизу появилась полоса, хотя на первоисточники этого нет. Вопрос, как убрать полосу
?
День добрый.
Подскажите как избавиться от белой рамки в низу изображения.
а как создать сам дизайн этого окна в photoshop cc!?? скажите, пожалуйста.
или, может, его можно создать, как pop up??