Image fader on mouse over

**bootersbooters** · 12-25-2011, 03:18 AM

Hello everyone.

i have a page where i have many images, all are dull, when i move my mouse over them they should fade and glow.

Any such script will be helpfull?

am a newbie pls help

example is the one monalisa painting..

http://home.comcast.net/~jscheuer1/s...eset_write.htm

i want to use multiple such images, i dont understand what to do.

please show me what to edit there in the script.

**jscheuer1** · 12-25-2011, 03:48 AM

Use jQuery for that, it really simplifies things:

Code:

<!DOCTYPE html>
<html>
<head>
<title>jQuey Hover Fade In Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('.faders').css({opacity: 0.5}).hover(function(){
		$(this).stop().animate({opacity: 1});
	}, function(){
		$(this).stop().animate({opacity: 0.5});
	});
});
</script>
<style type="text/css">
body {
	color: #ccc;
	background-color: #000;
}
</style>
</head>
<body>
<p><img class="faders" src="photo1.jpg" alt="original image" title=""></p>
<p><img class="faders" src="photo2.jpg" alt="original image" title=""></p>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s...s/hover_in.htm

**bootersbooters** · 12-25-2011, 04:05 AM

Awesome

thanks a lot

Thread: Image fader on mouse over

Thread Tools

Search Thread

Image fader on mouse over

Bookmarks

Bookmarks

Posting Permissions