Почему мои изображения при наведении не выравниваются в HTML ⇐ CSS

[Anonymous]

У меня есть два изображения для каждой кнопки на моем сайте: одно — базовая версия кнопки, а другое — при наведении на нее курсора.
изображение при наведении для моего Кнопка «блог» отображается поверх кнопки над ней. (на изображении ниже я сделал кнопку прозрачной на 50 %, чтобы вы могли видеть проблему)
(https://i.sstatic.net/Hn98U1Oy.png)
(i знаю, что этот код не очень хорош, я начал изучать его только 4 дня назад и сейчас просто создаю этот тестовый сайт)
Я пробовал следовать нескольким различным онлайн-руководствам, но застрял как решить эту проблему.

Код: Выделить всё

.buttonlinks {
width: 300px;
height: 30px;
position: relative;
}

.buttonlinks img{
width: 100%;
height: 100%;
}

.aboutmehover {
position: absolute;
left:0;
top:0;
opacity: 0;
transition: all .3s ease-in-out;
}

.aboutmehover:hover {
opacity:1;
}

.bloghover {
position:absolute;
top:0;
left:0;
opacity: 0;
transition: all .3s ease-in-out;
}

.bloghover:hover {
opacity:1;
}

.interestshover {
position: absolute;
left:0;
top:15;
opacity: 0;
transition: all .3s ease-in-out;
}

.interestshover:hover {
opacity:1;
}

Код: Выделить всё

[url=otherpages/about-me.html]
[img]buttons/about-me.png[/img]
[/url]
[url=otherpages/about-me.html]
[img]buttons/about-me-hover.png[/img]
[/url]
[url=otherpages/blog.html]
[img]buttons/blog.png[/img]
[/url]
[url=otherpages/blog.html]
[img]buttons/blog-hover.png[/img]
[/url]
[url=buttons/interests.png]
[img]buttons/interests.png[/img]
[/url]
[img]buttons/interests-hover.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/786 ... ng-in-html