1

Eu tenho um botão que é assim:

inserir a descrição da imagem aqui

E quando eu passar o mouse, quero que fique assim:

inserir a descrição da imagem aqui

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.

4
  • Quando você diz "aparecer lentamente", seria de invisível para visível, ou "andando" de uma imagem para a outra?
    – bfavaretto
    Commented 21/10/2014 às 16:37
  • De invisível para visível, utilizando o transition, de exemplo, que coloquei ali. Isso funciona com background-color, se eu usar com background-image ele não faz. Commented 21/10/2014 às 16:39
  • 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.
    – Zuul
    Commented 21/10/2014 às 16:44
  • Você falando que o backgroound-image não pode ser animado, já resolveu meu problema. Vou ter que fazer com Jquery, fazer uma div, que quando eu passo o mouse em cima dela, apareça a outra div com a classe do hover Commented 21/10/2014 às 16:50

2 Respostas 2

5

Um exemplo simples com button:

.opa, .opa span {
  position:relative;display:block;
  width:60px;height:60px;
  margin:0;padding:0;
  border:none;
}

.opa {
  background: url(https://i.sstatic.net/IO1RB.jpg);
}
.opa span {
  background: url(https://i.sstatic.net/cCrYi.jpg);
  transition: opacity .7s;
  opacity:0;
}

.opa:hover span {
  opacity: 1;
}
<button class="opa">
  <span></span>
</button>

1
  • Não havia pensado em usar o opacity, funcionou! Commented 22/10/2014 às 11:20
1

Felipe, eu fiz algo bem semelhante em um projeto meu. Ficou assim:

HTML

<div id="navLateral">
        <ul>
            <li class="item1">
                <a href="#">OP1</a>
            </li>
            <li class="item2">
                <a href="#">OP2</a>
            </li>
            <li class="item3">
                <a href="#">OP3</a>
            </li>
        </ul>
    </div> 

CSS3

#navLateral{
right: -70px;
position: fixed;
top: 300px;
z-index: 100;
}
#navLateral li{
background-color: #3e3e3e;
height: 50px;
margin-bottom: 10px;
position: relative;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
list-style:none;
}
#navLateral li:hover{ margin-left: -80px; }
#navLateral a{
background-color: #3e3e3e;
background-repeat: no-repeat;
background-position: 5px center;
color: #ffffff;
display: block;
font-size: 14px;
height: 50px;
line-height: 50px;
padding-left: 70px;
width: 130px;
text-decoration:none;
}
#navLateral .item1 a{ background-image: url(../images/suaimg.png); }
#navLateral .item2 a{ background-image: url(../images/suaimg.png); }
#navLateral .item3 a{ background-image: url(../images/suaimg.png); }

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .