CSS image overlay with color and transparency
JSFiddle Demo
HTML:
<div class="image-holder">
<img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>
CSS:
.image-holder {
display:inline-block;
position: relative;
}
.image-holder:after {
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: blue;
opacity: 0.1;
}
.image-holder:hover:after {
opacity: 0;
}
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