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
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">
-
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
-
-
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
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
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á.