In this tutorial we are going to create a Flash-like rollover effect with the help of CSS and jQuery.
TECHNIQUE
For this rollover effect, I have used the CSS technique discussed in
CSS Decorative Gallery in Web Designers Wall.
The next image gives a little overview of what we are going to do.
We are going to create a list element for each photo. Within this list element, there is a link containing an image and a span tag. The span tag further contains another image. The image within the span tag is the image which is shown to the user 'by default' and when the user rolls over the link, the image within the link will fade in. That is to say the span completely covers the image and when the user rolls over, the span tag fades out.
THE LAYOUT
We create an index.html file and put the following codes in it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Amazing rollover with jQuery</title>
<style type='text/css'>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
body {
font-size: 14px;
line-height:1.3em;
}
a, a:visited {
outline:none;
}
.clear {
clear:both;
}
#wrapper {
width:480px;
margin:auto;
}
</style>
</head>
<body>
<div id='wrapper'>
<ul class='photo-list'>
<li>
<a href='#'>
<img src='images/screen1.png'/>
<span><img src='images/teaser.png'/></span>
</a>
</li>
<li>
<a href='#'>
<img src='images/screen2.png'/>
<span><img src='images/teaser.png'/></span>
</a>
</li>
<li>
<a href='#'>
<img src='images/screen3.png'/>
<span><img src='images/teaser.png'/></span>
</a>
</li>
<li>
<a href='#'>
<img src='images/screen4.png'/>
<span><img src='images/teaser.png'/></span>
</a>
</li>
</ul>
</div>
</body>
</html>
The images within the links are all 210px by 210px photos which I have taken randomly from
Flickr's WebDesign Pool. [See the demo for links to individual pages.]
STYLE THE IMAGES
Now that we have the skeleton, we move on to style it with CSS.
First we style the list elements. To remove the bullets, put the following code within the <style> tag of your index.html
ul.photo-list {
list-style:none;
}
Since all our images are 210x210 pixels, we set the height and width of each list element to 210px each. Also, we align the list elements side by side by float:left
ul.photo-list li {
width:210px;
height:210px;
float:left;
margin:10px;
}
Next, we add the following css to style the links within each list element. (i.e. the <a> tags.)
ul.photo-list li a {
display:block;
position:relative;
}
Notice, we have set position:relative.
Now, we add the following css styles.
ul.photo-list li a img {
position:absolute;
z-index:1;
}
ul.photo-list li span {
display:block;
height: 210px;
width: 210px;
position:absolute;
z-index:2;
}
Notice that the positions of both the image and the span tag are set to absolute. This is important. Also, the z-index of image is 1 and that of the span is 2. This is to stack the span over the image.
Now, if you view the page in your browser, you'd notice that the teaser.png image has fully covered the screenshots.
BRING IN THE ANIMATION
Next, we add the jquery library within the head tag.
<script type='text/javascript' src='jquery.pack.js'></script>
For the fade-in and fade-out effect, add the following code within the head tag.
<script type='text/javascript'>
$(function(){
$(".photo-list a").hover(function(){
$(this).children("span").fadeOut();
}, function(){
$(this).children("span").fadeIn();
})
});
</script>
This is simple. When the user hovers over the link, the above bit of code fades out the span tag and when the user moves away from the link, the span tag fades in. Simple!
And that's all!
CONCLUSION
This is, as usual, a simple mock-up of how things work. Play with it. Try to improve it. :)
Labels: Tutorials
He has also linked to Google Maps so that you can see it yourself. These locations are seen within Victoria, Australia.
