Add a color overlay on hover

Question

I want to achieve this functionality as shown in image.

Image on left is orignal and when I hover over that image, Some color defined by us should overlay image as shown in Right. I have tried using CSS no use. I was trying to achieve this thru SVGs, but I am not much experienced in it. Is there any method which can be used to achieve this effect.

UPDATE

I don't want to use any extra image on hover.
I may be able to select any other color instead of black on hover.

You can easily do this using svg. But you need to have the image as svg file — Ani, Jul 14 '14 at 14:25
Images are in raster format, jpg or png. Can we Include it and anyhow edit that SVG. Is it possible? — JayKandari, Jul 14 '14 at 14:29
I have done with svg, I am not sure if you can do with png, jpg. If you have an svg and post it in the question, I cans how you how to do it. — Ani, Jul 14 '14 at 14:38

score 0 · Answer 1 · answered Jul 14 '14 at 13:50

0

This is possible with webkit-filter.

Please try for not hovered image:

img {
    -webkit-filter: contrast(10) grayscale(1);
}

And then drop all filters on hovered:

img:hover {
    -webkit-filter: none;
}

What you have to know, NOT ALL browsers supports -webkit-filter. Also its nice idea to check this page. It will help you with finding correct values.

answered Jul 14 '14 at 13:50

Kasyx

3,170
21
32

I want to be able to replace that overlay with any color. – JayKandari Jul 14 '14 at 13:51
well, I learned a bit about CSS filters.. but not exactly what I needed here in this question. – JayKandari Jul 14 '14 at 14:02
Thats only one thing i know you can do if you dont want to use second image. – Kasyx Jul 14 '14 at 14:05

score 0 · Answer 2 · answered Jul 14 '14 at 13:50

0

use can use two Images on hover u can show second image and hide first image.similarly u can do this with second image

answered Jul 14 '14 at 13:50

Ramniwas chhimpa

205
1
2
10

I don't want to use 2nd Image. Any other options? – JayKandari Jul 14 '14 at 14:06

score 0 · Answer 3 · answered Jul 14 '14 at 13:52

0

propose here is a solution using sprites demo

<div class="picture-hover"></div>

.picture-hover {
            background: url(https://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
        }
        .picture-hover:hover {
            background: url(https://i.stack.imgur.com/55veX.png);
            width: 239px;
            height: 180px;
            background-position: -239px 0px;
        }

answered Jul 14 '14 at 13:52

Alex Wilson

2,421
11
13

I want to be able to overlay multiple colors as per users choice. – JayKandari Jul 14 '14 at 13:56
You can use webkit-filter: opacity (25%); but this method is not browser-based crossover – Alex Wilson Jul 14 '14 at 14:00
That doesnot give output as desired. – JayKandari Jul 14 '14 at 14:03
You can use svg, image transfer to svg file type font, connect through font-face and use psevdo element hover with the desired color to fill – Alex Wilson Jul 14 '14 at 14:14

Add a color overlay on hover

3 Answers3