0
130
ViewsLinear progressive blur on an image
I am trying to linearly and progressively blur out an image. I have not found any resources on this online at all, or perhaps I just have no idea what to search for. Could someone provide me with a similar resource or search term so that I can find the tutorials or templates for this if it exists?
Picture for illustration:
Any help would be appreciated, thank you!
·
Juan Pablo Isaza
2 answers
Answer question0
Try this:
figure {
position: relative;
}
figure::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
}<figure>
<img width="50%" src="https://placekitten.com/640/360" alt="">
</figure>And you can change the alpha channel in the white color as you need.
·
Juan Pablo Isaza
Report
0
You could use a gradient that goes from transparent to white like this:
#fade {
transform: translate(0, -100px);
position: absolute;
width: 100%;
height: 100px;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
} <body>
<h1>Headline</h1>
<div id="text">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<div id="fade"></div>
<h1>Next things</h1>
</div>
</body>
·
Juan Pablo Isaza
Report
Answer question