Menu principal com efeito Hover do mouse em imagem

Detalhes da questão

Endereço do fórum: http://bloodypalacerpg.forumeiros.com/forum
Versão do fórum: phpBB2

Descrição

Olá, recentemente mudei meu template do fórum e no anterior eu havia conseguido um código de CSS onde ao passar o mouse sobre a imagem do ícone do menu (exp: índice) ele trocava pra outra imagem do ícone. Só que ao trocar pro novo templete, fiz novos botões pro menu, peguei o código do outro template CSS que fazia esse efeito hover funcionar mas ficou bugado... Gostaria de saber se teria outro código ou se há algo errado nesse que tenho.


Hover

O código que funcionava no outro template. Se quiser ver o bug que ficou no menu, está ativado só pro índice...

Código:

#i_icon_mini_index{width:80px; height:22px; background:url(https://imgur.com/Lx8One2.png) no-repeat 0 0;}
#i_icon_mini_index:hover{width:80px; height:22px; background:url(https://imgur.com/hyyH0AD.png) no-repeat 0 -22px;}

Grata!

up

Olá @Hagatsune,
Mude o seu código, para o seguinte código:

Código:

#i_icon_mini_index {
    width: 100px;
    height: 22px;
    background: url("https://i.imgur.com/Lx8One2.png");
    background-size: cover;
    transition: background 0.25s ease-in-out;
}
#i_icon_mini_index:hover {
    background: url("https://i.imgur.com/hyyH0AD.png");
    height: 22px;
    width: 100px;
    background-size: cover;
}

Cordialmente,
pedxz.

Obrigado!! Funcionou perfeitamente, pode fechar S2