CSS image overlay with color and transparency

Question

I am trying to figure out if I can add an overlay to an image like a tint and change the opacity without adding background color. I had no luck so I thought I would ask here

Answer 1

CSS Filter Effects

^{It's not fully cross-browsers solution, but must work well in most modern browser.}

EXTERNAL DEMO PLAYGROUND

• CSS Filter Effects

IN-HOUSE DEMO SNIPPET (source:simpl.info)

#container {
  text-align: center;
}

.blur {
  filter: blur(5px)
}

.grayscale {
  filter: grayscale(1)
}

.saturate {
  filter: saturate(5)
}

.sepia {
  filter: sepia(1)
}

.multi {
  filter: blur(4px) invert(1) opacity(0.5)
}

  
simpl.info CSS filters

  
  
  
  
  
  

  
View source on GitHub

NOTES

• This property is significantly different from and incompatible with Microsoft's older "filter" property
• Edge, element or it's parent can't have negative z-index (see bug)
• IE use old school way (link) ^{thanks @Costa}

RESOURCES:

• Specification [w3.org] w3 ref
• Documentation [developer.mozilla.org] doc
• Chrome platform status: [chromestatus.com] official status
• Browser support [caniuse.com] ref
• Say Hello to Webkit Filters [tutsplus.com] info
• Understanding CSS Filters Effect [html5rocks.com] doc