How to Create a Blurry Picture with a CSS Background Opacity?

Hi bloggy readers,
I think it's gonna be cool if we can create a blurry picture with CSS background opacity on the selected photo in our blog. Yeah,or example, now take a look at this photo below, and then move the mouse cursor inside the picture, and see the difference when your mouse cursor moves inside the picture and outside the picture.

Isn't that great?

Blurry Picture with CSS background opacity can now be enjoyed for those of you who like your own photo to be shown in different look when being pointed by mouse cursor. By using some CSS background property opacity on selected element, we will make a diversity on the chosen photos in our blog. Just read the whole post, and you will figure it out how exactly to do that..

There are 2 phases in order to successfully applied this tutorial in your blog, so be sure to follow every step by step to make this CSS background opacity works on your blog. Okay, now begin the first phase.


1. Login to Blogger
To start this tutorial, now go to Blogger.com and Log to your account, and enter the Dashboard page.

2. Go to Layout/Design
In your Dashboard, choose one of your blog and then click Layout/Design button. By doing so, you will be brought to the new page containing the layout of your blog template.

3. Edit HTML
In the Layout/Design tab, now press the middle sub-tab called Edit HTML and you will enter the new page contains with the template code of your blog.

4. Find the code
By pressing the button Ctrl + F at the same time, you will automatically enter the search/find mode. In this mode, you will be able to find any specific code that you cannot find in normal mode. Now find the code below. Just block the code below and then press Copy, and put the code into the search mode text box and press Search/Find

6. Save the change
Now Save the current change by clicking the Save Template button on the below position of the HTML box.



Okay guys, after finished following every step in the first phase, now let's proceed to the second phase, which is to apply the blurry effect on selected photo.

7. Wrapping photo with div tags
Right now, i am assuming that you already prepare your own photo. And the photo you selected has already been uploaded to the image hosting, and then you also get the URL address of that photo you've uploaded before. Now, it is the time to begin embedding your selected photo into your blog along with the blurry effect we've set before. Now wrap the URL address of your selected photo with the code below:

As you can see in the code above. There are 2 main configurations you must set here. For the code link-address is the code for the URL address of your blog or any other page. And then for the code image-source-address is the code for the URL address of the picture. So if the URL address of the picture you've uploaded is:

And then, you want that picture to link to your blog, for example :

So the final configuration of the code should now look like this:

So this is the final result of the photo using blurry picture with CSS background opacity.



Okay, now we are ready to finish this whole tutorial. In the last part of this tutorial, i want to show you how to set up the blurry picture with CSS background opacity we've made with some certain commands which later, will have some effects on your blurry picture.



If you want your picture to not linking to a new page then you just need to change the URL address code with the code #nogo. Look at the example below!
Okay now you can see the result of CSS background opacity directly on your blog. Anyway, If it doesn't work, i believe there is something you forget to implement in this post. Read it on properly then.

Good luck bloggy!