Give effect to the image and the hover back to make colored

Question

Give effect to the image and the hover back to make colored

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

When hovering, does the image become colored again?

0

css css3 css-hover

Author: Rogério Pancini, 2018-06-20

Source

1 answers

score 2 · Accepted Answer

A suggestion would be this way: an image with grayscale 100%, and on it a pseudo ::after with transparent green background. Hovering the mouse, the pseudo some 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>