Дима Долготер

див. position:relative в нем текст и картинка. диву padding-left:50px;
картинке positionLabsolute; top:0; left:0

воть) Tonykark9597

div{
 border: 2px solid transparent;
transition: all 0.1s linear;
}
div:hover{
 border: 2px solid #2b9d82;

}

крон и бекенд)

<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );  ?>" alt="<?php echo get_post_meta( get_post_thumbnail_id(get_the_ID()), '_wp_attachment_image_alt', true);?>">

get_the_ID() это id твоего поста

1) у тебя видать скрипт выполняется быстрее чем элементы появились на странице. скрипт отработал просто элементов нет.

$( document ).ready(function() {
 jQuery('header').hide();
jQuery('div', '#hide').hide();
});

2) подход очень не правильный. используй is_page. в более правильном варианте нужно делать так
это код на пхп
как узнать id страницы (в примере показана запись,...

<?php if( !is_page( тут id страницы ) ){  ?>//если это любая страница кроме текущей
	 <?php get_header()?>//показать на всех страницах, кроме указанной
<?php  } ?>

но утебя так не подключатся стили вообще, так что тем же кодом добавляй класс header

<header class="тут_твои_классы <?php if( !is_page( тут id страницы ) ){  echo "hide_this"; } ?> ">

и только на этой странице у хедера будет класс hide_this, а дальше вообще легко

в css 
.hide_this{
 display:none !important;
}

на jquery накидай

$(document).on("click", "селектор кнопки",function(){
let card_heading=$(this).parent("селектор карточки").find("селектор заголовка").text()
$("cелектор заголовка в модалке").text(card_heading)
})

сделал все максимально просто
дока тут

<script src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'    query='#svg' name='pz'></script>

let move_y=0;
       let move_x=0;
       $(".zoom").on("click", function() {pz.zoomTo(move_x, move_y, 1.25)})
       $(".unzoom").on("click", function() {pz.zoomTo(move_x, move_y, 0.8)})
       $(".arrdown").on("click", function() {  pz.moveTo(move_x, move_y+=10) })
       $(".arrup").on("click", function() {pz.moveTo(move_x, move_y-=10) })
       $(".arrright").on("click", function() {pz.moveTo(move_x+=10, move_y) })
       $(".arrleft").on("click", function() {pz.moveTo(move_x-=10, move_y) })

есть плагин duplicator выдет архив и файл installer.php на него переходишь в браузере (domain.com/installer.php) и пишешь доступы к новой бд и все отлично работате

https://scrollmagic.io/

перепиши все.
вот твой html

<div class="row g-3 form_buying_product" >

    <div class="col-3">
        <input type="number" class="form-control number" name="number" min="1" value="1">
    </div>
    <div class="col-auto">
         <button type="submit" class="btn btn-warning submit_btn"
                                 data-product_id="{{ product_img.product.id }}"
                                 data-name="{{ product_img.product.title }}"
                                 data-price="{{ product_img.product.price }}"


         >в корзину</button>
    </div>
</div>

вот твой js

$(document).ready(function(){
 
    function basketUpdating(product_id, nmb, is_delete){
        var data ={};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token ={% csrf_token %}; // тут я напрямую вставил токен
        data["csrfmiddlewaretoken"] = csrf_token;

        if (is_delete){
            data['is_delete'] = true
        }

         
        $.ajax({
            url: ajax_url ,
            type: 'POST',
            data: data,
            cache: true,
            success: function (data) {
                if (data.products_total_nmb || data.products_total_nmb == 0){
                    $('#basket_total_nmb').text(data.products_total_nmb)
                    $('.basket-items ul').html("");
                    $.each(data.products, function(k, v){
                        $('.basket-items ul').append('<li>'+v.name+', '+v.nmb+' шт. '+' по '+v.price_per_item+' руб ' +
                      '<a class="delete-item" href="" data-product_id="'+v.id+'">X</a>'+
                        '</li>');
                    });
                }
            }
        })
    }
    $(".submit_btn").on('click', function(e){
        e.preventDefault();
        var nmb = $(this).closest(".row").find('.number').val();
         var product_id = $(this).data('product_id');
        var product_name =  $(this).data('name');
        var product_price =  $(this).data('price');
   var ajax_url =  $(this).data('url');
       basketUpdating(product_id, nmb, is_delete=false);

по сути поменял только
$(".submit_btn").on('click', function(e){
e.preventDefault();
var nmb = $(this).closest(".row").find('.number').val();
var product_id = $(this).data('product_id');
var product_name = $(this).data('name');
var product_price = $(this).data('price');
var ajax_url = $(this).data('url');
этот блок поставил чтоб брало инфу от конкретного блока а не первого

wow js + animate css
так и гугли