Как сделать появление изображений при наведении в zero block Tilda.

Pizza

Pasta

Lasagna

Soup

more than 32 types

10 €

more than 15 types

16 €

more than 6 types

21 €

more than 8 types

8 €

Разберемся как сделать такой эффект.

Создаём zero-block

Создаём shape, при наведении на которые должны появляться изображения. Создаём в нём изображения и отключаем им Lazy Load.

Важно!
Изображения добавляем через imagе, a не shape.

Назначаем классы элементам

Для каждого shape назначаем класс с порядковым номером: elem_1; elem_2 ... elem_n.
Для изображений назначаем класс с порядковым номером: img_1; img_2 ... img_n.

Важно!
Порядковый номер изображения должен соответсвовать порядковому номеру shape, при наведении на который это изображение должно появляться.

Дополнения

• Чтобы задать ширину изображения в конце кода нужно указать:
width: 400px;
• Чтобы какие-то элементы были под изображением, как линии в примере выше, добавьте код №2 и в нём укажите классы нужных элементов.
• Код предназначен для экранов шириной более 1200 px. Для экранов меньше — код отключен. Если нужно его включить, это можно сделать в конце кода.

Код №1

Projection equipment: slide projectors, presentations, overhead projectors, and computer projectors.

<script>
    $(document).ready(function(){
        // Классы шейпов
        var hover_elems = $(".hover_elem1, .hover_elem2, .hover_elem3, .hover_elem4, .hover_elem5");
        // Классы изображений
        var images = ".hover_img1, .hover_img2, .hover_img3, .hover_img4, .hover_img5";

        $("body").append("<div class='hover_float_img'></div>");

        var img_exist = 0;
        var img_src;

        var images_arr = images.split(", ");

        hover_elems.each(function(i, item) {
            $(item).hover(function(){
                img_src = $(images_arr[i]).find(".tn-atom__img").attr("src");
                if (img_exist == 0) {
                    $(".hover_float_img").append( "<img class='tn-atom__img' src='" + img_src + "'>" );
                    img_exist = 1;
                } else {
                    $(".hover_float_img .tn-atom__img").attr("src", img_src);
                }

                $(".hover_float_img").css("opacity", "1");
            }, function(){
                $(".hover_float_img").css("opacity", "0");
            })
        })


        $(window).mousemove(function(e){
            var width = $(".hover_float_img").get(0).offsetWidth;
            var height = $(".hover_float_img").get(0).offsetHeight;
            $(".hover_float_img").css("top", e.clientY - height / 2).css("left", e.clientX - width / 2);
        })
    })
</script>
<style>
    .hover_float_img {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 1;
        transition: opacity .2s;
    }
    .hover_float_img,
    .hover_float_img img {
        /* Ширина изображения */
        width: 400px;
    }
        /* При ширине экрана меньше чем 1200 пикселей эффект не работает */
    @media screen and (max-width: 1200px) {
        .hover_float_img {
            display: none;
        }
    }
</style>

Код №2

Projection equipment: slide projectors, presentations, overhead projectors, and computer projectors.

<style>
    .line
    {
    z-index: 0 !important;
    }
</style>