CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
user2028856
user2028856

Reputation: 3183

CSS/jquery blur overlay effect example

If you take a look at this website, when you scroll down you'll notice that there is some sort of blur overlay effect

https://medium.com/war-is-boring

I had a look at the source code in Chrome but I couldn't find the exact CSS used to achieve this effect. Does anyone have an idea or suggestion on what techniques is used to achieve this effect? I'm planning on using it on a mobile menu.

Thanks

Upvotes: 0

Views: 2507

Answers (2)

Chase
Chase

Reputation: 29549

The page you're referencing uses data-* attributes and some Javascript to cleverly switch the background image to a blurred one. This explains why you couldn't find the CSS:

<div class="image-full-bleed is-usingCanvas" data-scroll="blur-cover" data-image-url="https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/60/darken/25/1*fDLP8pfTZX3cAQB0J6a72g.jpeg" data-image-blur-url="https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/40/darken/50/blur/50/1*fDLP8pfTZX3cAQB0J6a72g.jpeg"><div class="image-src picker-target" style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/60/darken/25/1*fDLP8pfTZX3cAQB0J6a72g.jpeg')"></div></div>

Depending on your needs, you may be able to use Filter - Blur: 

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

If you clearly layout what you're looking for I may be able to help point you in the right direction.

Also, if you don't need the blur effect and just need something semi-transparent the you can use the opacity (-ms-filter for old IE) value.

Upvotes: 3

Jai
Jai

Reputation: 74738

apply blur filter:

-webkit-filter: blur(10px); // for chrome
-moz-filter: blur(10px); // for firefox

Upvotes: 1

Related Questions