6

I'm trying to grey out a section of an image (two stripes at left and right). Is there a way to do this using just CSS?

I know I can use filters (i.e. filter: grayscale(100%)), but I don't want the entire image to be grey.

hopper
  • 13,060
  • 7
  • 49
  • 53
kunde
  • 401
  • 1
  • 6
  • 14

3 Answers3

9

Pure CSS Solution with no extra markup

JSFIDDLE DEMO

HTML

<div class="image-container">
    <img class="image-grey" src="http://placekitten.com/200/150" />
</div>

CSS

.image-container {
    position:relative;
    display:inline-block;
}

.image-grey {
    display:block;
    -webkit-filter: grayscale(100%);
}

.image-container:after {
    position:absolute;
    content:"";
    top:0;
    left:50%;
        width:50%;
    height:100%;
    background-image:url(http://placekitten.com/200/150);
    background-position:top right;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • I commented when I saw the final effect, but it's not exactly what I need (its just the half). I need to add two gray stripes to the image, not just one. I'm trying different things with this technique, but I couldn't find a way to add another grey stripe to the right side. Maybe what I'm trying to do needs to be done with javascript or something else. – kunde Oct 28 '13 at 06:11
  • Now it's officially what I wanted. – kunde Oct 28 '13 at 16:39
  • If you want to use `background-size: cover;`, this example won't work. But I [forked the fiddle](http://jsfiddle.net/m04Lnt1a/) so it will also be able to do that! – Yeti Sep 23 '18 at 17:42
2

Put a div over it.

<div id="wrapper">
    <img src="path/to/file.jpg" />
    <div id="filter">
</div>
<style>
#wrapper {position: relative;}
#filter {
    position: absolute;
    top: 123px;
    left: 123px;
    width: 42px;
    height: 42px;
    background: rgba(255,0,0,0.5);
}
</style>

http://jsfiddle.net/BQ7J3/

bjb568
  • 11,089
  • 11
  • 50
  • 71
  • +1 I was just in the process of making a JSFiddle for this (only I used PlaceCage :) http://jsfiddle.net/jM7S6/ – Jason Sperske Oct 25 '13 at 21:26
  • Of course that's not greying out the image as such, it's darkening the colors that are there. http://jsfiddle.net/W4tY6/ . However, it might suffice instead. – Paulie_D Oct 25 '13 at 21:32
  • It looks like what I want, but not exactly. The background alpha property doesn't do the trick for me. Cool trick though. – kunde Oct 25 '13 at 21:34
  • There really isn't much difference between a filter and a semi-transparent background. If you don't wand darkening, then use #fff or something. – bjb568 Oct 25 '13 at 21:42
  • Wand darkening! Scary! – bjb568 Jan 04 '14 at 21:02
2

If you do indeed wish to use the greyscale filter you will need to have two images on top of each other, one with the greyscale filter applied and clipped to the size you wish.

<div class="image-container">
    <img class="image-grey clip" src="http://placekitten.com/200/150" />
    <img class="image-coloured" src="http://placekitten.com/200/150" />  
</div>

and 

.image-coloured {
    z-index: 0;
    position: absolute;
}

.image-grey {
    z-index: 1;
    position: absolute;
    -webkit-filter: grayscale(100%);
}

.clip {
    clip: rect(0px,60px,150px,0px)
}

Fiddle

bjb568
  • 11,089
  • 11
  • 50
  • 71
Code Monkey
  • 1,785
  • 11
  • 13