Search code examples
javascriptjquerycssjquery-effects

Torch or Light effect using Javascript or Jquery or CSS?

I need to torch or light source effect on an image/div on my webpage without the use of Flash.

This is something similar to the light path effect on the main banner on this site:

http://online.fullsail.edu/degrees/media-communications-bachelors?mnc=2602

Please advise.

Solution

  • You can do something like this using CSS:

    http://jsfiddle.net/bFXzr/

    EDIT: Posting code as requested in comment:

    HTML

    <div class="box"></div>​

    CSS:

    body {
    background:#000;
}

.box {
    margin:50px;
    width:150px;
    height:150px;
    border-radius:50px;
    background:#ef5d22;
}

.box:hover {
    margin:50px;
    width:150px;
    height:150px;
    background:#ef5d22;
    box-shadow: 0 0 20px #fff;
}

​

    Hope that helps!