CRT Disturbance on Image ? Burn That Entena - Image Effect

Have a Look ! At This DEMO



This is really a Great Image Effect this is known as Video Effect on Images.Best thing is it is Totally CSS effect.It is not using any script or HTML.Its simple effective Effect : ) 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 =)




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

Search For ]]></b:skin>

For First(Without ANIMATION) IMAGE Effect In DEMO

Copy below Code And Then Paste ABOVE ]]></b:skin>

.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(http://i601.photobucket.com/albums/tt95/Inder002/crt-screen.gif) top left repeat;}.crt span.top {display:block;position:absolute;top:0;left:0;width:1000px;height:70px;background:transparent url(http://i601.photobucket.com/albums/tt95/Inder002/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(http://i601.photobucket.com/albums/tt95/Inder002/crt-bottom.png) bottom left repeat-x;}

Now where you want use this effect use Below Format

<div class="crt"><img src="image.jpg" 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 ]]></b:skin>

.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(http://i601.photobucket.com/albums/tt95/Inder002/crt-screen.gif) top left repeat;}.crt span.snow {background:transparent url(http://i601.photobucket.com/albums/tt95/Inder002/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(http://i601.photobucket.com/albums/tt95/Inder002/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(http://i601.photobucket.com/albums/tt95/Inder002/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" alt="Video Image!" /> <span class="snow"></span><span class="screen"></span><span class="top"></span><span class="bottom"></span></div>

You ARE DONE ! .Please Comment if you like that.

Credits : Author Matthew James Taylor Distributed for blogger Blogger Plug n Play