Дмитрий

По умолчанию .text - position: static, с котором z-index не работает, поэтому необходимо задать position: relative | absolute | fixed

Добавьте

a.link .text{
	position: relative;
	z-index: 2;
}

для li задать white-space: nowrap;

Пример

Используйте вместо opacity - background: rgba(0,0,0,.5);

Пример - fiddle

добавьте для &__link

-webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);

Fiddle

https://jsfiddle.net/9x9ceu6s/

еще вариант сделать обертку для img и задать этой обертке line-height: 0

https://jsfiddle.net/soledar10/8yz4ub61/2/
https://jsfiddle.net/soledar10/8yz4ub61/3/

Может такой вариант подойдет?
https://jsfiddle.net/LuepLxn9/

Вариант 1 - background-color: rgba
background-color: rgba(r, g, b, a);
Первые три буквы расшифровываются как red, green, blue
Последняя - альфа-канал и задает прозрачность элемента.
Пример

Вариант 2 opacity
Пример

Пример
https://jsfiddle.net/soledar10/opy1jh9x/

parent link - text-align:center;
или сделать обертку для ссылки - и задать text-align:center
https://jsfiddle.net/soledar10/hxanr7ay/