Give effect to the image and the re-colored Hover

Asked

Viewed 293 times

0

I don’t know if it’s possible. I tried it 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 layer of green.

When passing the mouse, the image turns back to color?

css css3 css-hover

  • Could you give an example of the original image and the image with Hover? It will better describe your problem.

1 answer

2


A suggestion would be this way: an image with grayscale 100%, and on it a pseudo ::after with transparent green background. When passing the mouse, the pseudo disappears and the image returns to the grayscale 0% showing off their 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>

Browser other questions tagged css css3 css-hover

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