Half Transparent Div Above Image

I have a PNG image of a character, and I want something like that: http://www.swfcabin.com/open/1364482220. If someone clicks on a part of the character's body, it'll be 'selected'

Solution 1:

You can make this work with CSS masks, although they are currently only supported in WebKit browsers: http://caniuse.com/#feat=css-masks

http://jsfiddle.net/eRVpL/3/

HTML:

<div class="character">
  <imgsrc="http://img194.imageshack.us/img194/3854/goldgladiator.png"><divclass="green-mask"></div></div>

CSS:

.green-mask {
  height: 200px;
  width: 508px;
  background: rgb(160, 255, 97);
  opacity: .3;
  position: absolute;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked div:

http://jsfiddle.net/eRVpL/11/

HTML:

<div class="character">
  <imgsrc="http://img194.imageshack.us/img194/3854/goldgladiator.png"><divclass="green-mask"><divclass="filler"></div></div></div>

CSS:

.filler {
  background-color: rgba(160, 255, 97, 0.3);
  height: 200px;
  margin-top: 200px;
  width: 100%;
}

.green-mask {
  position: absolute;
  width: 508px;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.

Solution 2:

Currently there is no CSS-only means of accomplishing this. There is a specification for compositing and blending with CSS that's in the works, but it currently isn't being supported enough to be used in a product just yet. You can read-up on the spec here: http://www.w3.org/TR/compositing/

With this specification, we could set the blend-mode of your element to "screen", "overlay", or "lighten" which would make your character be green but the background would remain white. Unfortunately, this isn't possible just yet.

The best way would be, as jcubic said in one of your comments, "You need to use a mask, image that will be exactly the same but the character transparent".

Good luck!

Solution 3:

Try using z-index for getting what you want. You'll be able to make the object appear to be hidden on a certain page until you bring it up with a mouse click or hover. You can also make a green image that's basically a silhouette and cut it up into three different portions, give them a little bit of exact positioning (each with their own division) and have a little z-index, then you've got yourself that. You might also want to cut up the actual character into three parts to make it easier.