1

Is it possible to place an "overlay" div on top of a picture with color and as a result, gray out the part of the picture that the overlay is covering?

I know there is the -webkit-filter property, but that seems to only gray out the entire image the property applies to.

Putting a gray div on top of the picture does not seem to work either because some of the color from the image still seems to show through!

Right now the only solution I can think of is to overlay the exact same image on top of the original image with a -webkit-filter property on it.

Thanks in advanced.

Edit:

Sorry this probably isn't very good, but hopefully should illustrate what I want:

This is the original image. Notice the color: enter image description here

After having an overlay on top of the original image, the pattern still shows, but now that section is completely devoid of all the red:

enter image description here

Edasaur
  • 377
  • 6
  • 19
  • 2
    you should post an image of what you expect the outcome to be. As I read this I thought you were just asking for the css grayscale filter, but then I thought maybe an overlay mask... but now I am unsure. A sample with original, overlay, final would help – Kai Qing Jul 07 '14 at 05:21
  • ^Okay will whip up something really quickly. – Edasaur Jul 07 '14 at 05:32
  • 1
    You can't do this using CSS without two copies of the image (as you fear). +1 for noble ambition, though :) – Nick Jul 07 '14 at 05:43
  • Ahhh okay. Thanks~ Guess I'll be proceeding with my original solution :) – Edasaur Jul 07 '14 at 05:48
  • @Edasaur, might be this would be helpful in your case. http://stackoverflow.com/questions/16340159/greyscale-background-css-images – Kheema Pandey Jul 07 '14 at 05:50
  • @KheemaPandey, I'm actually looking for something that will allow me to partially filter out an image, so that, unfortunately, will not work :( – Edasaur Jul 07 '14 at 05:54

4 Answers4

2

There's no great solution for this with css and html. If I absolutely had to do this, I'd just bring the image into photoshop and manually add in the grayed out area. I don't think the semi-transparent div overlay is a bad option either, but you mentioned that not being what you desired.

Sometimes you have to compromise the design or do things in a way that isn't ideal (ie photoshop images). Hopefully someone can provide a better alternative, but I don't think there is one.

davevsdave
  • 264
  • 2
  • 15
  • I agree, it's not really solving his problem, but if the design has to be a certain way, sometimes photoshop is the path of least resistance. Filters and masking/clipping support is still limited. It would be a way bigger headache to do it that way than just run a batch command in photoshop. – davevsdave Jul 07 '14 at 05:49
  • No critique implied. If it's not being done dynamically on uploaded images or whatnot, yours is the best way. +1 – Nick Jul 07 '14 at 05:52
1

An overlying div coloured grey but with an opacity less than 1 should achieve the desired effect (unless I've misunderstood). See, for example, Example 3 here.

Nick
  • 5,767
  • 10
  • 50
  • 77
  • Hmm see the problem I have with that is that there is still color from the original purple showing through the overlay div. I'm not sure how to get rid of the color completely so that the background image appears to be grey. – Edasaur Jul 07 '14 at 05:31
  • @Edasaur. Ah, I see. Have you looked at this? http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css. Scroll down to the 300+ answer. – Nick Jul 07 '14 at 05:35
  • I guess you want image should be gray. why not using `filter: grayscale(100%);` . – Kheema Pandey Jul 07 '14 at 05:36
  • 1
    The greyscale will, of course, apply to the whole image. If you want part-colour/part-grey, you'll need to have two copies of the image layered exactly and then crop one to suit (as you suggest yourself). – Nick Jul 07 '14 at 05:38
1

I took a stab at this. Check the fiddle: http://jsfiddle.net/9yVuA/

Basically, if you use containing elements you can achieve an effect that fits how I see your request:

<div id="test">
    <div id="overlay"></div>
    <img id="image" src="http://i.stack.imgur.com/ncoqL.png">
</div>

and the css...

#test{
    width:400px;
    height:400px;
    overflow:hidden;
    position:relative;
    padding:0;
    margin:0;
}

#overlay{
    width:400px;
    height:400px;
    background:url(http://i.stack.imgur.com/ncoqL.png) fixed;
    position:absolute;
    top:-400px;
    left:0px;
    z-index:100;
    -webkit-transition:.2s linear;
    transition:.2s linear;    
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

#test:hover #overlay{
    top:-200px;
    -webkit-transition:.2s linear;
    transition:.2s linear;
}

You may need to add extra support for transition for cross browser support. I just put this together pretty quickly so I may have left out some things. The alignment is a little off, etc, but it proves this is possible with just css and html.

Kai Qing
  • 18,359
  • 5
  • 34
  • 56
0

I hope the z-index property will help you.

Please check Fiddle for a simple example.

For your overlay div you have to assign

z-index:999;

This will hide the image parts. Hope this will help you.

Mijoe
  • 208
  • 2
  • 9
  • Hmmm I'm not sure how z-index will help me. Could you elaborate? I'm trying to see what's beneath the overlay divs in greyscale – Edasaur Jul 07 '14 at 05:57