-= означает вычесть и присвоить результат. Почему вычитаем -2, а не прибавляем 2? Потому что innerHTML - это строка, а сложение строк и чисел в javascript'е имеет результатом строку, т.е. вместо 3 было бы 12, вместо 4 было бы 22, вместо 5 было бы 32. А вот вычитание из строки преобразует строку в число, так что получаем нужный результат.this.innerHTML *= 2.
.overlay со своим opacity виноват. В примере, на который вы дали ссылку, вместо opacity используется background-color c прозрачностью - исправил свой пример соответствующим образом.