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.
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

If you try it in Photoshop you'll see it won't work there either, simply because the premise in wrong. Overlaying a semi-transparent colored mask on top of a colored base image just gives ugly results, not a recolored result. — Niels Keurentjes, Jul 18 '13 at 11:18
how about overlaying it with another image, I guess I can deal with that — srtstripes, Jul 18 '13 at 11:22
Can you use CSS3, or must be a fully cross-browser solution? — gmo, Jul 18 '13 at 11:33
Check this: http://html5-demos.appspot.com/static/css/filters/index.html — achudars, Jul 18 '13 at 11:46

gmo · Accepted Answer · 2019-06-13T08:37:41.787

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

CSS filters don't work in IE is there a way to overlay a filter pre-made in photoshop? Like a transparent white png to white wash. — Costa Michailidis, Jul 04 '15 at 00:56
Never mind, here's the old school way: https://css-tricks.com/frosting-glass-css-filters/ — Costa Michailidis, Jul 04 '15 at 00:57

score 14 · Answer 2 · answered Jul 18 '13 at 12:08

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

Hristo Valkanov · Answer 3 · 2013-07-18T12:08:20.770

4

If you want to make the reverse of what you showed consider doing this:

.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }

and look at the effect on the 2nd picture.

Is it supposed to look like this?

edited Jul 18 '13 at 12:08

answered Jul 18 '13 at 11:47

Hristo Valkanov

1,689
22
33

wait wut? I think you wrote the comment on the wrong place. – Hristo Valkanov Jun 18 '14 at 23:11

score 2 · Answer 4 · answered Jul 18 '13 at 11:48

2

something like this? http://codepen.io/Nunotmp/pen/wKjvB

You can add an empty div and use absolute positioning.

answered Jul 18 '13 at 11:48

Juan Rangel

1,763
1
18
34

score 1 · Answer 5 · edited Jun 05 '18 at 13:37

1

Have you given a try to Webkit Filters?

You can manipulate not only opacity, but colour, brightness, luminosity and other properties:

edited Jun 05 '18 at 13:37

BlaM

28,465
32
91
105

answered Jul 18 '13 at 11:48

achudars

1,486
15
25

CSS image overlay with color and transparency

5 Answers5

CSS Filter Effects

Linked