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

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

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

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

Передвиньте поочерёдно картинки на передний план, в зависимости от порядка предполагаемого их появления.

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

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

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

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

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

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

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

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

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

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

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

Еще попробовать и к z-indez-у добавить !important

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

если делать через css анимацию триггер hover, то элементы увеличиваются вправо, и поэтому всегда получаются сверху, ладно, ща пороюсь в закормах, найду решение Вашего трабла универсальное

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

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

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

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

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

сбросьте мне архив проекта, посмотрю

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

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

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

Отправлено спустя 16 секунд:

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

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

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

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

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

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

451.zip

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

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

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

Все возможно. В триггере поставьте active, а картинки поставьте в сетку

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

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

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

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

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

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

Добро пожаловать на форум!