Меню

Как сделать чтоб при наведении на картинку появлялся текст

Текст на изображениях, примеры и готовый код

Пять оригинальных эффектов появления текста на изображениях, при наведении курсора.

Текст появляется из глубины изображения.

Текст появляется из глубины изображения, вращаясь.

Текст вытягивается с краёв изображения.

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

Размещается текст в пользовательских атрибутах data.

В этом варианте помимо описания выводится и заголовок картинки.

.lake:before <
display : block ;
background-color : rgb(0, 0, 0) ;
content : «» ;
height : 100% ;
opacity : 0 ;
position : absolute ;
width : 100% ;
z-index : 2 ;
>

.lake:after <
font-family : ‘Lucida Console’ ;
color : white ;
content : attr(alt) ;
display : block ;
font-size : 16px ;
opacity : 0 ;
padding : 0 3% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
-webkit-transform : scale(0) translateY(-50%) ;
transform : scale(0) translateY(-50%) ;
width : 94% ;
z-index : 3 ;
>

.lake img <
border : none ;
display : block ;
z-index : 1 ;
>

.lake:after <
-webkit-transition : all 350ms ease-in-out ;
transition : all 350ms ease-in-out ;
>

.lake:hover:before <
opacity : 0.6 ;
>

.lake:hover:after <
opacity : 1 ;
-webkit-transform : scale(1) translateY(-50%) ;
transform : scale(1) translateY(-50%) ;
>

/style >
/head >
body >
a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a >
/body >
/html >

.lake:before <
display : block ;
background-color : rgb(0, 0, 0) ;
content : «» ;
height : 100% ;
opacity : 0 ;
position : absolute ;
width : 100% ;
z-index : 2 ;
>

.lake:after <
font-family : ‘Lucida Console’ ;
color : white ;
content : attr(alt) ;
display : block ;
font-size : 16px ;
opacity : 0 ;
padding : 0 3% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
-webkit-transform : scale(0) translateY(-50%) ;
transform : scale(0) translateY(-50%) ;
width : 94% ;
z-index : 3 ;
>

.lake img <
border : none ;
display : block ;
z-index : 1 ;
>

.lake:after <
-webkit-transition : all 350ms ease-in-out ;
transition : all 350ms ease-in-out ;
>

.lake:hover:before <
opacity : 0.6 ;
>

.lake:hover:after <
opacity : 1 ;
-webkit-transform : scale(1) translateY(-50%) ;
transform : scale(1) translateY(-50%) ;
>

.lake:after <
-webkit-transform : scale(0) rotate(-360deg) translateY(-50%) ;
transform : scale(0) rotate(-360deg) translateY(-50%) ;
>

.lake:hover:after <
-webkit-transform : scale(1) rotate(0deg) translateY(-50%) ;
transform : scale(1) rotate(0deg) translateY(-50%) ;
>
/style >
/head >
body >
a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a >
/body >
/html >

@keyframes appearing <
0% <
transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
50% <
transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
>

@-webkit-keyframes disappearing <
0% <
-webkit-transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
50% <
-webkit-transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
-webkit-transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
>

@keyframes disappearing <
0% <
transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
50% <
transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
>

@-webkit-keyframes positioning <
0% <
z-index : 10 ;
>
99% <
z-index : 10 ;
>
100% <
z-index : 1 ;
>
>

@keyframes positioning <
0% <
z-index : 10 ;
>
99% <
z-index : 10 ;
>
100% <
z-index : 1 ;
>
>

.lake <
display : inline-block ;
overflow : hidden ;
position : relative ;
text-align : center ;
text-decoration : none ;
>

.lake:before <
-webkit-animation : disappearing 500ms ease-in-out forwards ;
animation : disappearing 500ms ease-in-out forwards ;
background-color : rgba(0, 0, 0, 0.6) ;
color : rgba(255, 255, 255, 0) ;
content : attr(alt) ;
display : block ;
font-family : ‘Lucida Console’ ;
font-size : 16px ;
padding : 5% 2% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
width : 96% ;
z-index : 5 ;
>

.lake img <
-webkit-animation : positioning 510ms ease-in-out forwards ;
animation : positioning 510ms ease-in-out forwards ;
border : none ;
display : block ;
position : relative ;
z-index : 10 ;
>

.lake:after <
opacity : 0 ;
background-color : white ;
content : «» ;
display : block ;
height : 100% ;
position : absolute ;
top : 0 ;
width : 100% ;
z-index : 15 ;
>

Читайте также:  Как сделать ультрафиолетовую лампу в домашних условиях для ногтей

.lake:hover:before <
-webkit-animation : appearing 500ms ease-in-out forwards ;
animation : appearing 500ms ease-in-out forwards ;
>

/style >
/head >
body >
a class =» lake » href =» # » title =»» alt =» Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. «> img src =» images/45.jpg » alt=»»> /a >
/body >
/html >

На страницы блога на WordPress, изображение вставляется через загрузчик.

Затем, в первых трёх случаях тегу задаётся класс, после чего в файл style.css вносятся стили этого класса.

В четвёртом примере изображение так же загружается через загрузчик, после чего заключается в блок div.

В пятом — картинка загружается в папку images шаблона.

Стили так же вносятся в style.css.

Желаю творческих успехов.


Перемена

Три пути ведут к знанию: путь размышления — это путь самый благородный, путь подражания — это самый легкий, и путь опыта — это самый горький. Конфуций.

Источник

Как делается в html всплывающая подсказка?

Дата публикации: 2016-10-20

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

Стандартная подсказка

По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.

В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:

Читайте также:  Макехуман как сделать персонажа и одежду на него

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

Способ 2. Чистый css и плавное появление

Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.

Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах

Все права защищены © 2021
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Источник

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

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

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

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

HTML Разметка

Стили CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как сделать чтобы приложения устанавливались на карту памяти xiaomi

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

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

Просто обнесите ссылкой картинку:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Adblock
detector