4

Como faço efeito em CSS de passar o mouse sobre uma imagem ela aparecer com cores e ao retirar ela fique preto e branco?
Gostaria de fazer com CSS ou outro, sem ser com o flash(R.I.P.).

3 Respostas 3

7

Você pode usar o filter do CSS3 exemplo:

<img src = "image_path" class="image">

E no CSS fazer assim:

.image{
    -webkit-filter:grayscale(100%);
}
.image:hover{
    -webkit-filter:grayscale(0%);
    transition: 1s;
}

O transition é apenas para dar um efeito mais suave. Você só deve levar em consideração
que deve usar o prefixo webkit para os navegadores chrome, safari e opera.
O firefox 35+ e o edge 16+ já suportam sem precisar usar prefixo.

.image{
    -webkit-filter:grayscale(100%);
}
.image:hover{
    -webkit-filter:grayscale(0%);
    transition: 1s;
}
<img src="https://www.fillmurray.com/640/360" class="image">

4
  • Ia responder isso agora kkk, é o melhor do que criar duas imagens e acabar sobrecarregando o site. Commented 24/05/2016 às 22:37
  • 2
    +1 nem sabia que dava para fazer isso com css
    – Miguel
    Commented 25/05/2016 às 10:38
  • Valeu mesmo era isso mesmo :) Obrigado
    – Junior
    Commented 25/05/2016 às 11:11
  • Se a resposta lhe foi útil marque como respondida(a setinha verde em baixo da dos votos da pergunta) para que outras pessoas saibam que já está resolvida. ;) Commented 25/05/2016 às 11:53
0

para isso o mais simples é mesmo ter duas imagens, para ficar como eu acho que quer será as duas terem exatamente a mesma medida, neste caso as imagens são diferentes mas é só para ilustrar:

HTML:

<img class="cores" src="http://cinemacao.com/wp-content/uploads/2013/12/Scarlett-CAPA-2.jpg">
<img class="preto" src="https://cdn3.artstation.com/p/assets/images/images/001/113/371/large/nehaal-gonsalves-scarlet-johansson-face.jpg?1443931918">

CSS:

 img {
  position: absolute;
  width: 100px;
  transition: 1s;
}
.preto:hover {
  opacity:0;
}

Um exemplo no JSFIDDLE

2
  • Obrigado Miguel, mas gostaria de algo mais sutil, um efeito mais prolongado entre as transições, obrigado
    – Junior
    Commented 25/05/2016 às 10:59
  • Editei de acordo, é só adicionar um tempo de transição (transition)
    – Miguel
    Commented 25/05/2016 às 11:02
0

Vendo seus comentários acredito que está seja uma forma que vai mais agradar já que é a mais sútil de todas e a mais leve.

É bem simples e utiliza WebKit do css, fiz uma imagem teste só pra você ver como vai ficar.

img {
  /*opacidade*/
  opacity: 0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
  -webkit-filter: opacity(0.75);
  /*filtro P/B*/
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  /*qualidade*/
  image-rendering: auto;
}
img:hover {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  -webkit-filter: opacity(1);
  filter: none;
  /* Firefox 10+ */
  -webkit-filter: grayscale(0%);
  /* Chrome 19+ & Safari 6+ */
  image-rendering: auto;
}
<img src="http://essaseoutras.xpg.uol.com.br/wp-content/uploads/2011/05/circulos-coloridos.jpg">

É só passar o mouse e ele muda a cor, sem coisinhas que vão deixar o site mais lento ou sei lá.

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 .