CODEWITHSUNDEEP
javascriptjquerycssgoogle-plus
user3206729
user3206729

Reputation: 163

how do i recreate this google plus effect on a place image

I was just looking at a google plus place and i saw this cool blur effect on an image - the left side of the cover photo, is there anyway to recreate this, i have tried some css blur stuff and a couple plugins although they did not seem to come close to recreating this.

how do you think this is done?

https://plus.google.com/u/0/100447465665053723801/posts

Screenshot

used:

blur.js foggy.js

.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

Upvotes: 3

Views: 542

Answers (2)

Mike
Mike

Reputation: 1452

They've generated a blurred image version of the header image. Looking at the HTML/CSS you can find the image here:

https://lh5.googleusercontent.com/-nvDu86PoiAc/Uzylet0y0CI/AAAAAAAAABE/3mMd0DUauUY/s630-fcrop64=1,00411693ffffee64:Soften=1,60,0/Resort%2BPool%2B-%2Bdusk%2B2.jpg

You can do what you're trying to accomplish using CSS blur however.

<div style="position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(50px);">
        <!-- your image here -->
    </div>
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        <!-- your content here -->
    </div>
</div>

Obviously, you would not put your CSS inline like that. The image div must be separate otherwise your content will become blurred as well. Also, I should note that there is most likely no way to blur part of an image if that's what you're attempting. You'll need to use the same image twice.

Upvotes: 0

Quentin
Quentin

Reputation: 943630

Google use two copies of the image. One regular and one blurred. They then overlay and clip them.

Blur

Not blur

DOM

Upvotes: 2

Related Questions