site redesign

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.

workbanner

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.

See the demo version of this page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s