0

I'm trying to add a transparent red overlay to an image whenever the image has a tinted-image class, I want to do it with CSS. Actually, I want to apply it directly img tag. Is this possible?

My JS fiddle

I tried this:

<img class="tinted-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg"></img>

And CSS:

.tinted-image {

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    )

}

And nothing happens.

I don't want to use a div, like below. The thing is that I want to implement it directly in the img tag.

<div class="tinted-div"></div>
.tinted-div {
  width:200px;
  height:200px;
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

Please somebody help me? :(

  • Possible duplicate of [Tint image using CSS without overlay](http://stackoverflow.com/questions/12546499/tint-image-using-css-without-overlay) – Wim Mertens Sep 15 '16 at 23:26

1 Answers1

0

You can get a similar effect using :after if that helps? 

.overlay {
  position: relative;
  overflow: hidden;
}
.overlay:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 255, 0, 0.5);
}
<div class="overlay">
  <a href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg">
  </a>
</div>
chirag
  • 1,761
  • 1
  • 17
  • 33
sol
  • 22,311
  • 6
  • 42
  • 59