This question has already been answered:

I'm trying to make up for it. https://imgur.com/a/Iw4fF
It turns out this. https://imgur.com/a/i0655
How to make a blur of pictures as in the first link?

<div class="slick-track"> <il><a href=""><img src="src/assets/img/slaid3.jpg" alt=""></a></il> <il><a href=""><img src="src/assets/img/slaid4.jpg" alt=""></a></il> <il><a href=""><img src="src/assets/img/slaid5.jpg" alt=""></a></il> </div> .slick-track img { width: 100%; height: 50%; filter: blur(2px); }

Reported as a duplicate by Air members, Community Spirit ♦ Jan 15 '18 at 18:18 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Lay out as it should ... What other options ... - Alexander Semikashev

2 answers 2

Or you can do it

 .slick-track { width: 100%; height: 50%; background-image: linear-gradient(blue 0%,blue 100%), url("a.png"); background-blend-mode: color;

}

In the gradient you set the desired color.

The example does not use blur() , but simply such a filter ... This is the easiest option ...

 .slick-track { position: relative; width: 400px; height: 280px; background: url(https://s1.1zoom.ru/b5050/32/250997-frederika_1400x1050.jpg); background-size: cover; } .filter { position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, .4); } 
 <div class="slick-track"> <div class="filter"></div> </div>