I found a tutorial on this website that I'm trying to follow. It involves creating a fading/darkening effect on image rollover with text appearing, but I can't seem to get it to work even when starting from scratch.
Despite having experience with jquery before, I'm struggling to troubleshoot why it's not working this time.
I've included all the code in my document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>;
<style type="text/css">
.wrapper { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width:300; height: 300; margin: 0 auto; }
.wrapper:hover { cursor: pointer; }
.description { display: none; background-color: #000; color: #000; position: absolute; left: 8px; top: 8px; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; }
.description img { vertical-align: middle; margin: 0 2px 1px 0; }
</style>
<script src="jquery-1.3.1.min.js" type="text/javascript">
$(document).ready(function(){
$('.wrapper').hover(function(){
$(this).children('.description').stop().fadeTo(200, 0.8);
},function(){
$(this).children('.description').stop().fadeTo(200, 0);
});
});
</script>
</head>
<body>
<div class="wrapper">
<img src="http://www.compuhex.co.uk/Version2/products2/blue.PNG" alt="Product 1" />
<a href="#" title="Click for More" class="description">
Want to read more?
</a>
</div>
</body>
</html>
You can view the live link here.
Apologies if the code looks messy, and thank you for any assistance provided.
In summary, I'm trying to figure out why the code isn't working despite following the tutorial closely. The technique demonstrated is exactly what I want to implement on my website. Thanks!