How do you make an image or button glow when you mouse over using javascript or jquery?

Question

I want to add a glowing effect when I mouse over a button or image. How do I do this with javascript, jquery, or CSS? Here is an example of what I want it to lookhttp://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

Can someone give me some sample code?

Thanks in advance

Answer 1

If you dont mind targeting modern browsers you can use CSS transitions and box-shadow properties, no JS needed.

Check out this site here:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Scroll down until you see Fade-in and Reflect)

Demo here: http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

Answer 2

Never a bad time to post Radioactive Buttons , which is pure CSS3. Only Webkit browsers though (eg Chrome and Safari). Here's a modified version that just glows on hover, which is much less distracting:

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
}

a.green.button {
  background-color: #749a02;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

a.green.button:hover {
  background-color: #91bd09;
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-box-shadow: 0 0 18px #91bd09;
}

<a href="#" class="green button">Click Me</a>

jsFiddle demo . It should make it easier as more browsers adopt it, but until then this is just an add-on to the JavaScript-based solutions.

Answer 3

Here is a pretty good jQuery example and code:

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Answer 4

Using CSS also you can achieve the same:

HTML

 <img class="opacity_img" src="image.png" alt="" />

CSS for IE :

 .opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }

CSS for other browsers:

 .opacity_img{
  opacity: 0.45;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
 }

Answer 5

liza gave a great answer - the effect achieved only in few lines of code.

But if you'd like it more smooth you can make opacity transition last some time by adding:

 .opacity_img{
  opacity: 0.45;
  transition: opacity 0.5s;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
  transition: opacity 0.5s;
 }