,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

Creating a Blur Effect On Image

Posted By admin Saturday, March 26, 2011

Now I will discuss about how to create blur effect on the image. Image will appear dim (blur) and then will be evident when the cursor is highlighted. Less is more so the explanation short. To view a demo please point your cursor on the image on the side. How to make it quite easy, it only needs a little addition of CSS code.
Please read further steps to make it.

1. "Login" business as usual in your blogger acount
2. Click the "Layout", then click "Edit HTML"
3. Find the following code:

</ head>

Copy the code below and put (paste) just above (before) that code.

<style type="text/css">
a.linkopacity img {
filter: alpha (opacity = 50);
-moz-opacity: 0.5;
opacity: 0.5;
-KHTML--opacity: 0.5;

a.linkopacity: hover img {
filter: alpha (opacity = 50);
-moz-opacity: 1.0;
opacity: 1.0;
-KHTML--opacity: 1.0;
</ style>

4. Click Save

The next step is how to apply blur effect on the image. As common code used to create a link to the image is as follows

<a href="urltarget"> <img src="imageurl"> </ a>

Please replace the code above you to be like this

<a class="linkopacity" href="urltarget"> <img src="imageurl"> </ a>

But if you do not want the image in the form of a link, the following code

<a class="linkopacity"> <img src="imageurl"> </ a>

Related Post

Follow by Email