Карточки с эффектом при наведении
Как сделать
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 не нужно.
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 не нужно.
Код 1. Скрипт под каждую карточку
<script>
(function () {
var tildoshnaya_frame = $(".tn-elem__902167301551229099372");
var tildoshnaya_block = $("#rec90220023");
tildoshnaya_frame.prepend("<div class='hover'>");
var destination = tildoshnaya_frame.find(".hover");
tildoshnaya_block.appendTo(destination);
tildoshnaya_frame.find(".t396__artboard").addClass("noBackground");
tildoshnaya_frame.mouseenter(function(){
tildoshnaya_frame.find(".hover").addClass("active");
})
tildoshnaya_frame.mouseleave(function(){
tildoshnaya_frame.find(".hover").removeClass("active");
})
tildoshnaya_frame.addClass("wrap");
}());
</script>Код 2. Стили. Вставляем в конце кода
<style>
.hover{position:absolute;width:100%;height:100%;transform:translateY(100%);opacity:0;transition:all .4s}
.hover.active{transform:translateY(0);opacity:1}
.noBackground{background-color:transparent!important}
.wrap{overflow:hidden}
</style>