CSS image overlay with color and transparency

css, html, image

Solution

CSS Filter Effects

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

<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>

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)
}

<div id="container">

  <h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>

  <img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a rainbow" />
  <img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a rainbow" />
  <img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a rainbow" />
  <img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a rainbow" />
  <img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a rainbow" />
  <img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a rainbow" />

  <p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>

</div>

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

Problem

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. I would like to make it red with that opacity. here is what I have so far. I made an image to overlay it if I have to called overlay.png but don't know if its necessary. ``` img.highlighted { opacity:0.4; } ``` Basically I want to do this but reverse, for image to tint when hovered not to take the tint away when hovered. check it out here http://jsbin.com/igahay/3011/edit

Original source