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

User · Accepted Answer

CSS Filter Effects  It s not fully cross-browsers solution  but must work well in   most modern browser    lt img src  image jpg    gt   lt style gt      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           lt  style gt    EXTERNAL DEMO PLAYGROUND   CSS Filter Effects   IN-HOUSE DEMO SNIPPET  source simpl info    x000D   x000D   container   x000D    text-align  center  x000D    x000D   x000D   blur   x000D    filter  blur 5px  x000D    x000D   x000D   grayscale   x000D    filter  grayscale 1  x000D    x000D   x000D   saturate   x000D    filter  saturate 5  x000D    x000D   x000D   sepia   x000D    filter  sepia 1  x000D    x000D   x000D   multi   x000D    filter  blur 4px  invert 1  opacity 0 5  x000D    x000D   lt div id  container  gt  x000D   x000D     lt h1 gt  lt a href  https   simpl info cssfilters   title  simpl info home page  gt simpl info lt  a gt  CSS filters lt  h1 gt  x000D   x000D     lt img src  https   simpl info cssfilters balham jpg  alt  No filter  Balham High Road and a rainbow    gt  x000D     lt img class  blur  src  https   simpl info cssfilters balham jpg  alt  Blur filter  Balham High Road and a rainbow    gt  x000D     lt img class  grayscale  src  https   simpl info cssfilters balham jpg  alt  Grayscale filter  Balham High Road and a rainbow    gt  x000D     lt img class  saturate  src  https   simpl info cssfilters balham jpg  alt  Saturate filter  Balham High Road and a rainbow    gt  x000D     lt img class  sepia  src  https   simpl info cssfilters balham jpg  alt  Sepia filter  Balham High Road and a rainbow    gt  x000D     lt img class  multi  src  https   simpl info cssfilters balham jpg  alt  Blur  invert and opacity filters  Balham High Road and a rainbow    gt  x000D   x000D     lt p gt  lt a href  https   github com samdutton simpl blob gh-pages cssfilters  title  View source for this page on GitHub  id  viewSource  gt View source on GitHub lt  a gt  lt  p gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

JSFiddle Demo  HTML    lt div class  image-holder  gt       lt img src  http   codemancers com img who-we-are-bg png    gt   lt  div gt    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

User · Answer

something like this  http   codepen io Nunotmp pen wKjvB  You can add an empty div and use absolute positioning

User · Answer

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

User · Answer

Have you given a try to Webkit Filters   You can manipulate not only opacity  but colour  brightness  luminosity and other properties

[html] CSS image overlay with color and transparency

CSS Filter Effects

Examples related to html

Examples related to image

Examples related to css