Is there a way to replicate the Google Plus effect on a specific location image?

Recently, I came across a Google Plus page that had an amazing blur effect on one of its images - specifically on the left side of the cover photo. I tried using some CSS blur techniques and various plugins to recreate it, but none of them gave me the same result.

Do you have any idea how this effect was achieved?

Check out the Google Plus post here for reference

Tools 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);
}

Answer №1

Google employs a technique of utilizing two versions of the image - one clear and one blurred. These images are then superimposed and cropped accordingly.

Answer №2

A modified version of the header image has been created with a blur effect applied. To locate the HTML/CSS code for this image, refer to the link below:

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

You can achieve a similar effect using CSS blur techniques like the following example:

<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>

Remember to separate the CSS styling from your content to avoid blurring everything on the page. It's important to note that selectively blurring parts of an image may not be possible, requiring you to duplicate the same image if needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Background image specifically for the Fullcalendar sun component

When setting a background image for Sunday in the month view, I noticed that the day "Sunday" in the header is also getting the same background. The CSS for the table thread has classes like .fc-sun and .fc-mon set as well, but I'm not sure how to rem ...

Go to a specific component located in a different module within Angular

I have a default app.component that contains a button. When this button is clicked, I want to navigate to the login.component. Below is a snippet from my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; ...

The purpose of this code is to create a customizable container that allows us to choose elements and adjust their properties. Unfortunately, the code is not functioning as intended

I am trying to create an editable container that allows us to easily select boxes for editing. let SeconddivBox = document.getElementById("SeconddivBox"); let setCont = document.getElementById("setCont"); count = 0; setCont.addEventListener("click", ...

Adjusting window size when page is resized

While browsing through SO, I stumbled upon this interesting piece of code: var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w. ...

Displaying source code using AJAX in Symfony2

I've encountered an issue with my ajax code. Instead of sending the form data to the controller, it's returning the source code. To generate my route in my js code, I'm using FOSJsRoutingBundle as instructed in the documentation. When I mak ...

The named group Wildcard (:name*) is not functioning as expected when used with $routeProvider in AngularJS version 1.0

I'm attempting to implement a wildcard (*) routing functionality in AngularJS using the code snippet below: $routeProvider.when('/something/:action/:id/:params*\/', { templateUrl : "/js/angular/views/sample/index.html", controlle ...

Unable to access the data- attribute using Jquery

I have a loop in PHP that generates Bootstrap pagination elements. <button class="page-link" data-page="'.$page_number.'">'.$page_number.'</button> The pagination element looks like this: <button class="page-link" data ...

Body Mass Index (BMI) Calculator

I have developed a tool for calculating BMI. Here's an overview of how I envision the tool working and what I have implemented so far: Users input their height in inches and weight in pounds. The tool calculates their BMI and categorizes them as ...

Showing text in a textarea while maintaining formatting (such as using <br>)

Can someone help me with formatting a block of text like this: hello <br> how is your day <br> 123 To look like this: hello how is your day 123 I also need to display it in a textarea field. I attempted to do so using the following code: $ ...

Automatically reset the form after submission in CakePHP 1.3

I've encountered an issue with my report form that is linked multiple times on a page to a jQuery dialog box. To prevent cross-posting, I added a random string to the submission process. After successfully submitting the form on a single page access, ...

Error: Trying to use 'setTimeout' before it has been initialized is not allowed

I'm currently working on a JavaScript exercise in my code. I encountered an issue where I am trying to assign a reference to the setTimeout function to ogTimeout on the second line since I plan to redefine setTimeout later. However, when I run the co ...

In an effort to bring some flair to my React Hangman App, I am working on animating a collection

Challenge In my Hangman App, I am attempting to implement letter animations using react-spring. I want the letters from an array to fade in when loaded and fade out when removed by clicking on them. However, my previous attempts have resulted in laggy per ...

Experiencing difficulty in verifying a street address that contains letters

I have a function that successfully validates street addresses using English letters. However, it does not accept characters like ö, Ö, ä, Ä. How can I modify the function to include these special characters as well? validateAddress = function (val) ...

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

A guide on accessing MySQL database search data and displaying it on a datatable

I am currently using a datatable to display my data. I have a large database with nearly 15k rows, which is why it takes a considerable amount of time to load all the data. To speed up the process, I am only displaying 200 rows in the datatable. However, h ...

Having trouble with the functionality of expanding rows in Kendo grid

I am facing an issue with my Kendo grid that is populated from a SQL database. The expand feature works perfectly and displays a different Kendo grid in the expanded row when the program is first launched. However, if I perform a new search and get differe ...

TypeScript combined with Vue 3: Uncaught ReferenceError - variable has not been declared

At the start of my <script>, I define a variable with type any. Later on, within the same script, I reference this variable in one of my methods. Strangely, although my IDE does not raise any complaints, a runtime error occurs in my console: Referenc ...

instructions on using Emacs to run Node.js interactively on a Windows operating system

I had high hopes for this code snippet: (defun my-node () (interactive) (pop-to-buffer (make-comint "my-node" "node"))) However, when I execute M-x my-node and input 1+1 in the comint buffer, no output is displayed. This issue occurred on Emacs 24.0 ...

``I'm facing an issue with Vue.js where the values are not updating as

I am facing a peculiar issue that I can't seem to resolve. The testArray is expected to update its value from 'This is a test' to the array in ItemList, and it does so. However, it seems to be updating itself with a delay - when I change the ...

Position the divs on the left and right sides of the central div

I have a total of 7 divs, with one designated for the middle position. The goal is to display the top two pictures and the knife aligned correctly, but the rest are not appearing as desired. Below is the CSS code: .vegetablewrapper { width: 100%; ...