Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<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 