Disturbance/Snow Effect On Image In Blogger

Have a Look ! At This DEMO



You can also give an Disturbance effect Like CRT on your Images By using Simple CSS code,And Yes also very light to load OK Lets start It =)

FIRST OF ALL Please Upload Below Images

And Replace Them in code =)

crt-screen.gif
crt-top.png
crt-bottom.png
crt-snow.gif


Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For </head>

For First(Without ANIMATION) IMAGE Effect In DEMO

Copy below Code And Then Paste ABOVE </head>

.crt {
float:left;
position:relative;
overflow:hidden;
}
.crt img {
display:block;
float:left;
}
.crt span.screen {
display:block;
position:absolute;
top:0;
left:0;
width:1000px;
height:1000px;
background:transparent url(crt-screen.gif) top left repeat;
}
.crt span.top {
display:block;
position:absolute;
top:0;
left:0;
width:1000px;
height:70px;
background:transparent url(crt-top.png) top left repeat-x;
}
.crt span.bottom {
display:block;
position:absolute;
left:0;
bottom:0;
width:1000px;
height:110px;
background:transparent url(crt-bottom.png) bottom left repeat-x;
}

Now where you want use this effect use Below Format

<div class="crt">
<img src="image.jpg" width="300" height="400" alt="Video Image!" />
<span class="screen"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>

For Second (With ANIMATION) IMAGE Effect In DEMO

Copy below Code And Then Paste ABOVE </head>

.crt {
float:left;
position:relative;
overflow:hidden;
}
.crt img {
display:block;
float:left;
}
.crt span.screen,
.crt span.snow {
display:block;
position:absolute;
top:0;
left:0;
width:1000px;
height:1000px;
background:transparent url(crt-screen.gif) top left repeat;
}
.crt span.snow {
background:transparent url(crt-snow.gif) top left repeat;
}
.crt:hover span.snow {
display:none;
}
.crt span.top {
display:block;
position:absolute;
top:0;
left:0;
width:1000px;
height:70px;
background:transparent url(crt-top.png) top left repeat-x;
}
.crt span.bottom {
display:block;
position:absolute;
left:0;
bottom:0;
width:1000px;
height:110px;
background:transparent url(crt-bottom.png) bottom left repeat-x;
}

Now When you want to use this effect use bellow Format

<div class="crt">
<img src="image.jpg" width="300" height="400" alt="Video Image!" />
 <span class="snow"></span>
<span class="screen"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>

You ARE DONE ! =)