Search code examples
csssvgsvg-filterscss-filters

How to apply a dark blue filter on an slider image

I'm trying for already a couple of hours to make a dark blue filter! So, not only a "greyscale" use or brightness filters. I've heard about SVG and tried to understand how to use it in that case, but I don't even know if SVG would work in my case, tried all these webkit filters, and filters properties, and I really can't get that dark blue filter

And on google I couldn't find how to make a dark blue filter , or other custom filter

I can only by editing the image myself, but I really need to make it with CSS, JS or something.

I show you the result wanted :

Image without filter Image without filter

Image with filter Image with filter

If anyone could help me by giving some ideas or some code to help it would be very nice

Thanks in advance for your help!

Solution

  • This can be achieved in css, one approach is to use a pseudoelement on the image container.

    Give the pseudoelement the background colour you want and set an opacity. You can use rgba here instead if you like. 

    div {
  width: 500px;
  position: relative;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

div:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: darkblue;
  opacity: .4;
}
    <div>
  <img src="https://i.sstatic.net/45yOV.jpg">
</div>