Mummers

Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<img data-number="1">
Цифру меняем прямо в html
а в css пишем

img {
  postition: relative;
}
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: attr(data-number);
}

Если лень выставлять все номера в вёрстке, то используем счётчик на чистом CSS 3

/*Блок, в котором все ваши картинки (если такого нет пишите body)*/
.img-container {
  counter-reset: imageNum; /* вместо imageNum можно любое название на латинице*/
}
/*Все ваши картинки*/
img {
  counter-increment: imageNum; /*Имя счётчика должно совпадать*/
}
/* Выводим так же*/
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: counter(imageNum); /*Имя счётчика должно совпадать*/
}

Готово, если не сработает:
htmlbook.ru/blog/nachinaem-rabotat-s-css-schyotchikami

Можно на CSS

на этом сервисе укажи домен сайта. и будет видно на каком он хостинге. потом просто кинь ссылку на хостинг клиенту и скажи чтоб тот вошел в аккаунт и все. там будут доступы фтп или пусть сразу тебе даст доступы от аккаунта

Интересно мнение о моем коде

Сори за говнокод

function openhide(){
  document.querySelector('.hide_sett_passive').classList.add('hide_sett_active');
  document.querySelector('.hide_sett_passive').classList.remove('hide_sett_passive');
}

function closehide(){
  document.querySelector('.hide_sett_active').classList.add('hide_sett_passive');
  document.querySelector('.hide_sett_active').classList.remove('hide_sett_active');
}

function openprebook(){
  document.querySelector('.preblock_passive').classList.add('preblock_active');
  document.querySelector('.preblock_passive').classList.remove('preblock_passive');
}

function closeprebook(){
  document.querySelector('.preblock_active').classList.add('preblock_passive');
  document.querySelector('.preblock_active').classList.remove('preblock_active');
}

function open_prebooksItems1(){
  document.querySelector('.preblock_hs_itm1_passive').classList.add('preblock_hs_itm1_active');
  document.querySelector('.preblock_hs_itm1_passive').classList.remove('preblock_hs_itm1_passive');
}

function close_prebooksItems1(){
  document.querySelector('.preblock_hs_itm1_active').classList.add('preblock_hs_itm1_passive');
  document.querySelector('.preblock_hs_itm1_active').classList.remove('preblock_hs_itm1_active');
}

function close_when_all_close(){
  document.querySelector('.cl').addEventListener("click", function() {
    closehide();
    closeprebook();
    close_prebooksItems1();
  })
}

function MakeActive_hide_sett_passive(){
  document.querySelector('.shesterenki').addEventListener("click", function() {
    openhide();
  });
}

function click_hs_itm1(){
  document.querySelector('.hs_itm1').addEventListener("click", function() {
    openprebook();
    open_prebooksItems1();
  });
}

document.addEventListener("DOMContentLoaded", function() {
  close_when_all_close();
  MakeActive_hide_sett_passive();
  click_hs_itm1();
});

Сложно наговнокодить добавляя/удаляя классы.
В JS:
classList.add
classList.remove
и клик addEventListenter('click')
Элемент ищем document.querySelector();

Учить можно на javascript.ru или взять курс на udemy.com, к примеру...