Eu tenho um botão que é assim:
E quando eu passar o mouse, quero que fique assim:
Ok, por exemplo, posso usar:
.unidades:hover{background-position: center -49px;}
O problema é que aí eu não consigo fazer um efeito de aparecer lentamente, tipo transition: all 0.5s ease 0.1s;
Existe alguma forma de fazer isso? se eu usar o background-position
parece que tem um efeito de fade, que não é o que eu quero.
transition
, de exemplo, que coloquei ali. Isso funciona combackground-color
, se eu usar combackground-image
ele não faz.background-image
não é uma propriedade que possa ser animada. Tens que atualizar a pergunta com a tua markup para se fazer algum ajuste à mesma de forma a simular a animação.backgroound-image
não pode ser animado, já resolveu meu problema. Vou ter que fazer com Jquery, fazer umadiv
, que quando eu passo o mouse em cima dela, apareça a outradiv
com a classe dohover