Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Список значков с автоматическим увеличением при наведении  [new]
Alibek B.
Member

Откуда:
Сообщений: 3067
На веб-странице есть набор крупных иконок с поясняющим текстом.
Я хочу сделать так, чтобы при наведении курсора значок увеличивался, как это делается в RocketDock или MacOS.
Но есть три нюанса:
1. Иконка в обычном и увеличенном виде будет использоваться разная — при наведении курсора изображение должно заменяться на более крупное и детальное.
2. Элементы списка это не просто значки, у них есть текстовый заголовок (показываемый всегда) и поясняющий текст (показываемый при увеличении), который выводится под изображением.
3. Мне бы очень хотелось использовать многострочный список, т.к. в списке может быть до десятка элементов, на узкий экран они не поместятся, а скроллинг или карусель будут неуместны.

Сделать это в принципе сделал, но результат мне не нравится.
Не подскажите, как этот эффект правильно называется?
Хочу посмотреть примеры реализации.
17 дек 18, 15:18    [21766062]     Ответить | Цитировать Сообщить модератору
 Re: Список значков с автоматическим увеличением при наведении  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15681
Alibek B.
. Иконка в обычном и увеличенном виде будет использоваться разная — при наведении курсора изображение должно заменяться на более крупное и детальное.
в качестве примера могу порекомендовать https://github.com/JonHappy/JonHappy.github.io
тут пример https://jonhappy.github.io/modal_menu/
(подготовка превьюшка-иконки и полноразмерного для просмотра)
17 дек 18, 15:26    [21766077]     Ответить | Цитировать Сообщить модератору
 Re: Список значков с автоматическим увеличением при наведении  [new]
Alibek B.
Member

Откуда:
Сообщений: 3067
вадя
тут пример https://jonhappy.github.io/modal_menu/

По ссылке модальный диалог.
Какое он имеет отношение к моему вопросу?
17 дек 18, 15:42    [21766092]     Ответить | Цитировать Сообщить модератору
 Re: Список значков с автоматическим увеличением при наведении  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15681
Alibek B.
Какое он имеет отношение к моему вопросу?
если нажать на хххх выйдет "окно"
а там есть зелёный крестик. делаются полные и превьюшки, и сохраняются в первой вкладке - если нажать на превьюшка - выйдет полная картинка
заменить клик на наведение мыши - будет твой 1 пункт
17 дек 18, 15:54    [21766106]     Ответить | Цитировать Сообщить модератору
 Re: Список значков с автоматическим увеличением при наведении  [new]
Alibek B.
Member

Откуда:
Сообщений: 3067
Кто о чем, а вшивый про баню.
Мне не нужно делать превью и при клике или наведении выводить большую картинку.
Вопрос у меня совсем другой.
17 дек 18, 16:01    [21766114]     Ответить | Цитировать Сообщить модератору
 Re: Список значков с автоматическим увеличением при наведении  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15681
Alibek B.
Мне не нужно делать превью и при клике или наведении выводить большую картинку.
ну значит не правильно описал задачу
17 дек 18, 17:38    [21766241]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить