Hi,
I would like to put steam effect on my home page.
How to make animated steam effect using jquery?
Please help me.
My Website : http://hotels-b2b.com/biryani/

hey alredy i using this. but the thing is the smoke should spread all side.
please help me to make this

If you look at how the CSS work, you would see that the width of smoke image of CSS is being set to 250px. The JQuery is used to display the smoke, but not sizing it. You have to update the viewport .smoke in CSS yourself. Increase the width, margin-top, margin-left, and height of the display to match the viewport.

if you resize the picture for smoke in #viewport .smoke and edit the css to match the new size

#viewport .smoke {
  position: absolute;
  width: 800px;
  height: 800px;
  background:url('http://i.imgur.com/pVI5HbP.png') no-repeat;
  bottom: 230px; 
  margin-left:10px
}

you'll get larger smoke area
see the live example : http://jsfiddle.net/hawkiq/me1nupf5/