При фокусе на инпут используем transform: scale, чтобы увеличить картинку. Зрачков на картинке у товарищей нет (или можно закрывать белой точкой место, где они должны быть изначально), они наложены отдельными абсолютно спозиционированными элементами. При изменении состояния инпута смотрим сколько там символов и добавляем transform translate для зрачков. Можно такое и с координатами мышки делать (
пример), тоже забавно получается.
И может есть какие то (?каталоги?) где можно найти подобного формата различные интересные (?фишки?) ?
CodePen, там много всего есть. Следите за разделом picked pens, подписывайтесь на интересных людей и будет вам каждый день порция интересных фишек.