1) Создаем основной zero-блок и добавляем в него карточки при помощи «SHAPE» элементов.
2) Создаем дополнительные zero-блоки, под каждую карточку отдельный, т. е. если 4 карточки в основном zero, нужно 4 дополнительных zero — блока. В них мы создадим контент, который будет отображаться при наведении. Контент может быть любым, текст, изображения, кнопки, формы
3) Заполняем дополнительные zero-блоки с контентом для отображения при наведении. Для идеального совпадения высота и ширина контента должны соответствовать высоте и ширине карточки, в которой он будет. Так-же, каждому элементу нужно проставить container: window положение left;top.
Положение этого элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» элемент в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента
4) Теперь настраиваем первую карточку. Сначала нужно выяснить её «CLASS» (в основном zero-блоке,
вида .tn-elem__902 167 301 551 229 108 224) и «ID» дополнительного блока (вида #rec00000000), в котором находится контент, который будет отображаться при наведении.
5) Копируем код 1 и 2 в блок T123. В коде 1 в первых строках мы указываем «CLASS» 1-й карточки и «ID» дополнительного блока.
в строках —
var tildoshnaya_frame = $(«.tn-elem__902 167 301 551 229 108 224»); - заменяем «CLASS»
var tildoshnaya_block = $(«#rec90220023»); - заменяем «ID» блока
Если все сделали правильно, после публикации карточка будет работать.
6) Для остальных карточек нужно копировать только код 1 с указанием соответствующих «CLASS» и «ID».
Копировать код 2 не нужно.