Can anyone help me replicate the text overlay effect that is seen when hovering over an image on The Guardian website?
I have almost got it working, but whenever my mouse moves over the trail-text area, it starts bouncing (slideDown slideUp) repeatedly. I suspect this happens because the trail-text area becomes the focus and triggers the mouseout event.
Any suggestions or tips would be greatly appreciated! Thanks, Ben...
mypage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>TEST</title>
<style type="text/css">
.pixie {
width: 870px;
padding: 0;
margin: 0;
}
.strap {
padding: 0;
margin: 0;
}
div.caption{
padding-left: 10px;
/*background-color: #a5a5a5;*/
background-color: #e03d32;
color: white;
}
.caption h3 {
color: white;
}
.pixie a,
.pixie div,
.pixie a:hover {
display: block;
position: relative;
text-decoration: none;
}
.pixie div.trail-text {
color: #333;
background-color: transparent;
background-image: url(../images/grey-bg.png);
background-repeat: repeat;
}
.pixie div.trail-text {
display: none;
margin-top: 0;
position: absolute;
overflow: hidden;
text-align: left;
padding-top: 2em;
padding-bottom: 0;
z-index: 10;
height: 4.25em;
width: 870px;
}
</style>
<script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='javascripts/main.js' type='text/javascript'></script>
</head>
<body>
<div class='pixie'>
<div class='caption'>
<h3>Some Big Heading</h3>
<p class='strap'>Some strapline of stuff</p>
</div>
<div class='trail-text'>
The <strong>Overlay text</strong> which should appear and then disappear.
</div>
<img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
</div>
</body>
</html>
main.js
$(document).ready(function(){
$("div.trail-text").attr("style", "display: none;");
if ($(".pixie,div.trail-text")) {
var pixies = $(".pixie,div.trail-text");
$(pixies).mouseover(function() {
$(this).find("div.trail-text").slideDown("fast")
}).mouseout(function() {
$(this).find("div.trail-text").slideUp("fast")
});
};
});