Change color of an image by hovering the mouse over it

Asked

Viewed 13,930 times

4

How do I effect CSS to move the mouse over an image it appears with colors and when removing it becomes black and white?
I’d like to do with CSS or other than with the flash(R.I.P.).

html css

3 answers

7


You can use the filter of CSS3 example:

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

And in CSS do so:

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

The transition It’s just for a softer effect. You should only take into consideration
which must use the prefix webkit for Chrome browsers, safari and operates.
firefox 35+, and edge 16+ already support without using prefix.

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

  • I was going to answer that now kkk, is better than creating two images and end up overloading the site.

  • 2

    +1 I didn’t even know you could do that with css

  • Even thanks was that :) Thanks

  • If the answer was useful mark as answered (the green arrow below the vote of the question) so that other people know that it is already solved. ;)

0

for that the simplest is to even have two images, to look like I think will be the two have exactly the same measure, in this case the images are different but it is only to illustrate:

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;
}

An example in JSFIDDLE

  • Thank you Miguel, but I would like something more subtle, a more prolonged effect between transitions, thank you

  • I edited accordingly, just add a transition time (transition)

0

Seeing your comments I believe this is a way that will please you more since it is the most subtle of all and the lightest.

It is very simple and uses Webkit from css, I made a test image just so you can see how it will look.

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

Just move the mouse and it changes the color, no little things that will slow down the site or whatever.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.