Нужна помощь по hover transform и z-index

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 2
Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 19:23

Добрый вечер всем, убил уже кучу времени, перечитал про z-index уже кучу одной и той же инфы, все равно не выходит всплывающую картинку сделать поверх рядом стоящих... http://lazy.ho.ua/
Добавлял hover transform, затем еще hover z-index со значением в 100... никаких изменений...

Реклама
Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1277
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Нужна помощь по hover transform и z-index

Сообщение Gudwinn » 13 фев 2016, 21:54

Передвиньте поочерёдно картинки на передний план, в зависимости от порядка предполагаемого их появления.
http://wysiwygwebbuilder.offershop.ru/
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 21:57

так посетитель может в любом порядке на них наводить...

Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1277
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Нужна помощь по hover transform и z-index

Сообщение Gudwinn » 13 фев 2016, 22:06

В общем делайте выдвижение на передний план в очерёдности справа на лево и так порядно, то есть сначала выдвигаете на передний план самую правую картинку в ряду, потом следующую, и так далее (если есть ряд снизу, делаем так же. Вы удивитесь))) Увеличение сделайте через CSS анимацию, тригерр hover (там можно ширину и высоту менять при наведении на элемент)
http://wysiwygwebbuilder.offershop.ru/
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 22:20

В итоге только правая картинка в столбиках над другими, а левые и центральные под низом(
Делал через CSS переход hover : transform
Я сразу заливаю на фтп.. поэтому вы можете посмотреть как получилось.

Аватара пользователя

igorweb
Продвинутый
Продвинутый
Сообщения: 312
Зарегистрирован: 29 дек 2015, 20:16
Версия Web Builder: 12.0.0
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение igorweb » 13 фев 2016, 22:34

По-моему тут нужно еще код вручную прописывать с z-index-ом к каждой картинке в свойствах html (только при наведении, можно одинаковый), т.е. указывать hover
Разработка красивых и современных сайтов на заказ

Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 22:35

а как в код залезть? ато я видел тот блочок где можно добавить... но там нельзя редактировать, не вылезая из программы всмысле...
Последний раз редактировалось KyleshiK 13 фев 2016, 22:36, всего редактировалось 1 раз.

Аватара пользователя

igorweb
Продвинутый
Продвинутый
Сообщения: 312
Зарегистрирован: 29 дек 2015, 20:16
Версия Web Builder: 12.0.0
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение igorweb » 13 фев 2016, 22:36

Еще попробовать и к z-indez-у добавить !important
Разработка красивых и современных сайтов на заказ

Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1277
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Нужна помощь по hover transform и z-index

Сообщение Gudwinn » 13 фев 2016, 22:37

если делать через css анимацию триггер hover, то элементы увеличиваются вправо, и поэтому всегда получаются сверху, ладно, ща пороюсь в закормах, найду решение Вашего трабла универсальное
http://wysiwygwebbuilder.offershop.ru/
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 22:38

буду весьма благодарен :)

Аватара пользователя

igorweb
Продвинутый
Продвинутый
Сообщения: 312
Зарегистрирован: 29 дек 2015, 20:16
Версия Web Builder: 12.0.0
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение igorweb » 13 фев 2016, 22:39

Выделяете картинку и есть вверху свойство html, вот там есть вкладки. Попробуйте "в особоv стилt", либо "перед тегом". Но они по-разному будут писаться. В особом стиле пишите просто z-index:1000 !important; . А если перед тегом, то тогда пишите так: <style>#Image5 {z-index:1000 !important;}</style>
Последний раз редактировалось igorweb 13 фев 2016, 22:49, всего редактировалось 1 раз.
Разработка красивых и современных сайтов на заказ

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4867
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение anonimus » 13 фев 2016, 22:46

сбросьте мне архив проекта, посмотрю
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Можете в личку отправить свой вайбер, телеграмм, вотсап или просто мобильный и я вас наберу

Аватара пользователя

Автор Темы
KyleshiK
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 13 фев 2016, 19:18
Версия Web Builder: 11.0.2

Нужна помощь по hover transform и z-index

Сообщение KyleshiK » 13 фев 2016, 22:50

igorweb писал(а):Выделяете картинку и есть вверху свойство html, вот там есть вкладки. Попробуйте "в особоv стилt", либо "перед тегом". Но они по-разному будут писаться. В особом стиле пишите просто z-index:1000 !important; . А если перед тегом, то тогда пишите так: <style>#Image5 {z-index:1000 !important;}</style>


ни так, ни так ничего не поменялось к сожалению..

Отправлено спустя 16 секунд:
anonimus писал(а):сбросьте мне архив проекта, посмотрю


скинул в личку... там правда разные варианты уже пробывал... в среднем столбике то что изначально было..

Аватара пользователя

igorweb
Продвинутый
Продвинутый
Сообщения: 312
Зарегистрирован: 29 дек 2015, 20:16
Версия Web Builder: 12.0.0
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение igorweb » 13 фев 2016, 22:57

Попробуйте еще в этом коде заменить #Image5 на #wb_Image5
Разработка красивых и современных сайтов на заказ

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4867
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Нужна помощь по hover transform и z-index

Сообщение anonimus » 13 фев 2016, 23:23

не нужно ничего городить, всё просто

451.zip
У вас нет необходимых прав для просмотра вложений в этом сообщении.
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Можете в личку отправить свой вайбер, телеграмм, вотсап или просто мобильный и я вас наберу

Аватара пользователя

SatML
Неофит
Сообщения: 2
Зарегистрирован: 23 мар 2018, 16:35
Версия Web Builder: 12.5

Нужна помощь по hover transform и z-index

Сообщение SatML » 24 авг 2018, 12:45

Та же проблема, архив 451 открыл, хотя и почему-то с ошибками, более-менее разобрался.
Осталось 2 вопроса:
Увеличение с перекрытием работает только если изображение вставлено в слой? С отдельной картинкой такое решение не проходит.
Возможно это сделать по клику, а не по hover?

Аватара пользователя

Alex15963
Знаток
Знаток
Сообщения: 518
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4

Нужна помощь по hover transform и z-index

Сообщение Alex15963 » 25 авг 2018, 01:23

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

Аватара пользователя

SatML
Неофит
Сообщения: 2
Зарегистрирован: 23 мар 2018, 16:35
Версия Web Builder: 12.5

Нужна помощь по hover transform и z-index

Сообщение SatML » 27 авг 2018, 16:25

Да, работает, спасибо. Какой резон помещения в сетку? Разницы в поведении картинки в сетке и вне не заметил.

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

Аватара пользователя

Alex15963
Знаток
Знаток
Сообщения: 518
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4

Нужна помощь по hover transform и z-index

Сообщение Alex15963 » 28 авг 2018, 02:07

1. Я дал проект. Я не знаю как у вас, но у меня, при клике, одна картинка другую не перекрывает.
2. Это может быть связано с конфликтом скриптов.


Ответить Вложения 2

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: Helealart и 1 гость