Простой наложение текста Javascript/CSS на изображение

Question

Вот простой, но мой веб-фу ржавый. У меня есть список небольших изображений (ширина 100 пикселей, высота 125 пикселей). Я бы хотел, чтобы пользователи могли нажимать на изображение, и при этом на нажимом изображении накладывается число.

Есть ли «простой» способ сделать это только с помощью CSS и/или Javascript? Я мог бы использовать Javasript для добавления класса к кликному изображению/div, но не совсем уверен, как создать прозрачный оверлей с цифрами для заполнения области изображения. мне нужно рисовать на холсте или есть более простой способ?

Answer 1

Не уверен, что я задаю вопрос, так как это должно быть довольно прямолинейно.

Вот FIDDLE

Является ли это то, что вы пытаетесь сделать?

Answer 2

Вы можете иметь прозрачные изображения с цифрами на них, если их не так много (например, если это, скажем, менее 100). Затем просто наложите их на разные классы, как вы упомянули.