Hover: плитка-ссылка с фоном+затемнением+текст

[Senobiot]

Всем добрый вечер! Подскажите, не могу придумать как проще сделать появление на плитках-ссылках текста, хотя бы с двумя разными стилями,при наведении на них и затемнении, с учетом того, что текст будет разный на всех плитках и разные фоновые картинки. Сделал через display:none для текста, пришлось через position :absolut чтоб не прыгал элемент. Теперь не работает авто-выравнивание. Может кто посоветует что-то получше? Тут https://senobiot.000webhostapp.com/portfolio.html визуальное представление, тут код -https://jsfiddle.net/jdhnzfLs/1/ Заранее спасибо!

Edited January 29, 2020 by Senobiot
Upd

[Switch74]

.tile добавьте position: relative;
.tile:hover .test {
    display: block;
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    top: 50%;
    border: 1px solid green;
}

[Senobiot]

Спасибо, Switch74, получилось!  Только добавил ещё, чтобы надпись по центру плитки  была:

.tile:hover .test {
    display: block;
    width: 100px;
    height: 100px;
    margin: -50px auto 0 -50px;
    top: 50%;
    left: 50%;

Так понял при позиции absolute положение задается только left/right/yop/bottom или в % и по отношению к элементу у которого relative и дальше выравнивать на половину ширину/длины. Буду все переделывать, мне такое не нравится

[Switch74]

можно не использовать absolute тогда все будет работать как вы хотели
используйте background