Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados spritessprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.

Nessa respostaNessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position.

Por exemplo, considerando a imagem:

No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:

.icon {
  background: url('https://i.sstatic.net/0lq3l.png');
  display: inline-block;
  transition: background-position 400ms;
  height: 30px;
  width: 33px
}

.icon.gplus       { background-position: 533px 0   }
.icon.gplus:hover { background-position: 533px 95% }

.icon.linkedin       { background-position: 500px 0   }
.icon.linkedin:hover { background-position: 500px 95% }
<div class='icon gplus'></div>
<div class='icon linkedin'></div>

Imagem utilizada no exemplo por Di Web.

A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados sprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.

Nessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position.

Por exemplo, considerando a imagem:

No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:

.icon {
  background: url('https://i.sstatic.net/0lq3l.png');
  display: inline-block;
  transition: background-position 400ms;
  height: 30px;
  width: 33px
}

.icon.gplus       { background-position: 533px 0   }
.icon.gplus:hover { background-position: 533px 95% }

.icon.linkedin       { background-position: 500px 0   }
.icon.linkedin:hover { background-position: 500px 95% }
<div class='icon gplus'></div>
<div class='icon linkedin'></div>

Imagem utilizada no exemplo por Di Web.

A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados sprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.

Nessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position.

Por exemplo, considerando a imagem:

No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:

.icon {
  background: url('https://i.sstatic.net/0lq3l.png');
  display: inline-block;
  transition: background-position 400ms;
  height: 30px;
  width: 33px
}

.icon.gplus       { background-position: 533px 0   }
.icon.gplus:hover { background-position: 533px 95% }

.icon.linkedin       { background-position: 500px 0   }
.icon.linkedin:hover { background-position: 500px 95% }
<div class='icon gplus'></div>
<div class='icon linkedin'></div>

Imagem utilizada no exemplo por Di Web.

Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados sprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.

Nessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position.

Por exemplo, considerando a imagem:

No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:

.icon {
  background: url('https://i.sstatic.net/0lq3l.png');
  display: inline-block;
  transition: background-position 400ms;
  height: 30px;
  width: 33px
}

.icon.gplus       { background-position: 533px 0   }
.icon.gplus:hover { background-position: 533px 95% }

.icon.linkedin       { background-position: 500px 0   }
.icon.linkedin:hover { background-position: 500px 95% }
<div class='icon gplus'></div>
<div class='icon linkedin'></div>

Imagem utilizada no exemplo por Di Web.