For the redesign of my site, I wanted to present three main categories of work on the homepage. Each of three categories would occupy a big square, and the squares would sit next to each other horizontally in the main content area of the homepage. There would be a heading for each, and I wanted a way to add some information for each category that would appear on a mouseover. I had in mind a banner that would animate in on a rollover and disappear when the mouse moved away. Based on a demo I found here, I was able to create the desired effect.
This is the big square for the work category.
And, the banner that appears on a mouseover.
The script that I revised as needed:
<script type="text/javascript">
$(document).ready(function(){
$(".cwhm_work a").hover(function() {
$(this).next("span").animate({opacity:
"show", top: "110"}, "slow");
}, function() {
$(this).next("span").animate({opacity:
"hide", top: "140"}, "fast");
});
});
</script>
And, the html:
<div class="cwhm_work"> <h1>work</h1> <p><a href="work.htm"><img src="images/trans.gif"> </a> <span>Samples of professional work in art direction, graphic design, and web design.</span></p> </div>
The heading is an h1 styled to sit above the margin of the box. The background, border, and shadow are applied to the div containing the link and banner text. The link is a transparent gif that is sized to fit the full area of the square. The banner text is set to display: none, and the animate function is applied to the linked image on a hover. When the mouse enters the square, the function shows the text and the background applied to the banner text.
cyklopsdesign 