I have been working on a little page intro with jquery cycle and I am trying to make it so that when you hover over the separate images, they glow. However, no matter what I try with css and js, the effect is just not showing up. Can anyone help me figure out what the issue might be?
Live:
<!DOCTYPE html>
<html>
<head>
<title>MOON</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.centermoon').cycle({
fx: 'fade',
timeout: 1000,
speed: 500,
cleartypeNoBg: true,
nowrap: 1
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.moonpieces').cycle({
fx: 'curtainX',
timeout: 1100,
speed: 1500,
cleartypeNoBg: true,
nowrap: 1
});
});
</script>
...
#nav li a {
color:#777;
}
.gal {
margin:0 0 0 40px;
}
.prods {
margin:0 0 0 60px;
}
.home {
margin:0 0 0 140px;
}
.mktng {
margin:0 0 0 150px;
}
.clist {
margin: 0 0 0 40px;
}
.clogin {
margin: 0 0 0 40px;
}
a #headwrap:hover {
background-position: -150px 0;
color:#fff;
}