16еместо

8

0
+8

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

Такой простой и красивый вариант всплывающих описаний к картинке.

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

http://dbmast.ru/vsplyvayushhaya-podpis-k-kartinke-pri-navedenii-s-pomoshhyu-css3

John LapTev, 25.12.2014, 23:40
Статус идеи: ожидает рассмотрения

Комментарии

Дмитрий, 17.04.2015, 19:56
Поддерживаю!
Данную задачу решил выводом текста снизу от картинки1 (в админке есть возможность), еще одной картинки2 (тени) и текста с надписью.
Ну и конечно именно для это холста margin-ом поднял картинку2 с текстом до самой картинки1.
В обычной позиции opacity: 0; в наведенной opacity: 1;
Ну и для красоты transition: all 200ms ease 0s;
Если не понятно, могу объяснить подробнее, на примере.
John LapTev, 17.04.2015, 20:07
Всё понятно)

Но есть вариант проще и красивее, пример можно посмотреть на моём сайте:
http://дом-купольный.рф/

Чуть ниже в разделе "Купольный Дом подходит для:"
Наведи на иконку " i "
---
Такую подсказку можно поставить на любой объект, достаточно всего лишь подключить скрипт и присвоить тег rel="tooltip" к объекту на который мы хотим подставить подсказку.

Пример:
<a rel="tooltip" title="тут текст подсказки">а в этом месте текст или картинка, проще говоря объект к которому мы присваиваем подсказку</a>
---

В всплывающую подсказку можно так же поставить например картинку и что угодно.
Дмитрий, 19.04.2015, 00:20
Еще раз доказывает что возможно практически все)) Было бы желание))
P.S. Красивый сайт
John LapTev, 19.04.2015, 01:37
Спасибо)
Руслан, 25.06.2015, 12:36
>> достаточно всего лишь подключить скрипт
а какой скрипт подключать?
John LapTev, 26.06.2015, 17:26
https://yadi.sk/d/9hNgJ89OhVdyi

Ваши всплывающие подсказки.
Достаточно подключить только style.css и script.js
Остальное на ваше усмотрение.

В это архиве файлы уже с отредактированным кодом который хорошо дружит с CMS cPortfolio.

Вот же сайт где можно скачать стандартную версию:
http://www.hmil.com.ua/
а можно обновить ссылку на яндекс.диск?

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