Give effect on image and hover to leave color again

Question

Give effect on image and hover to leave color again

Navigation

#1 by (2 votes)

0

I do not know if it's possible. I tried with mix-blend-mode, filter, but it does not work. It would be possible for an image to begin with a layer of gray and on top, a green layer.

When you mouse-over, does the image turn red again?

css css3 css-hover

asked by anonymous 20.06.2018 / 20:06

1 answer

How to increment number to a variable in JS? How to change H1 using Javascript?

score 2 · Accepted Answer

A suggestion would be like this: an image with grayscale 100% , and on it a pseudo ::after with transparent green background. When you move the mouse, the pseudo disappears and the image returns to grayscale 0% showing its natural colors:

#container{
   position: relative;
   width: 300px;
   height: 200px;
}

#container img{
   width: 100%;
   height: 100%;
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

#container span::after{
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 100, 0, .4);
}

#container span:hover img{
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
}

#container span:hover::after{
   display: none;
}

<div id="container">
   <span><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></span>
</div>