The basic idea is to take a set of images and put them side by side but only showing a small vertical (or horizontal) slice from each image. When the mouse is moved over an image slice then you expand that slice to the full image width if you have a horizontal gallery.
Picture Credits: Petr Kratochvil from www.publicdomainpictures.net
The result is like having a stack of photos and sliding the one you are viewing on top of the others, which are only partially shown. The key to doing this in a cross-browser compatible way is to wrap each image inside an <a> anchor and use CSS "a:hover" pseudo property to expand the image that the mouse pointer is over.
You don't have to frame your images but I found out that when you do, it helps to separate the image being displayed from adjacent images. I used a low-key transparent frame, you can go with any style you wish. If you need help with creating transparent frames around your images, see this Photoshop tutorial.
The markup:
<div id="gallerydiv"> <a href="#"><img src="http://pics.cssrule.com/pics/o4.jpg" alt="multi" /></a> <a href="#"><img src="http://pics.cssrule.com/pics/o2.jpg" alt="green" /></a> <a href="#"><img src="http://pics.cssrule.com/pics/o3.jpg" alt="blue" /></a> <a href="#"><img src="http://pics.cssrule.com/pics/o1.jpg" alt="red globe" /></a> </div>
and here's the CSS:
#gallerydiv {
padding:0; margin:0;
list-style-type:none;
height:267px;
width:520px;
border:1px solid #888;
overflow: hidden;
}
#gallerydiv a {
float: left;
width:40px;
height: 267px;
text-decoration:none;
cursor:default;
}
#gallerydiv a:hover {
width: 400px;
}
#gallerydiv a img {
border:0; margin:0; padding:0;
}Note the width of 40px given for the a tag. That produces 40 pixel wide slices of the images. Then in a:hover we set the width to 400px which is the full image width.
One other thing to point out is that we do see one full image even without the mouse hovering over it. That's because the image overflows the 40 pixel width of the <a>. Overflows from other slices are obscured by the next image in the list. But the last one shows since there's nothing to cover it up. That works out perfectly since we always want one image to appear on top, even if the mouse isn't over any of them.
IE 6.0 UPDATE
This new version works on the ancient IE6 with one small glitch. Considering IE6 is down to < 5% of browser market share, I just don't think it's worth the time to code for IE6 anymore. Even Microsoft doesn't like it because they started a campaign to get the holdouts to move out of IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title>
<style type="text/css">
#gallerydiv {
padding:0;
margin:0;
list-style-type:none;
height:267px;
width:535px;
overflow: hidden;
}
#gallerydiv a {
width: 40px;
float: left;
width: 40px;
height: 267px;
overflow: hidden;
text-decoration:none;
cursor:default;
}
#gallerydiv a.d { overflow: visible; }
#gallerydiv a:hover {
width: 400px;
}
#gallerydiv a img {
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="gallerydiv">
<a href="#" class="a"><img src="http://pics.cssrule.com/pics/o4.jpg" alt="multi" /></a>
<a href="#" class="b"><img src="http://pics.cssrule.com/pics/o2.jpg" alt="green" /></a>
<a href="#" class="c"><img src="http://pics.cssrule.com/pics/o3.jpg" alt="blue" /></a>
<a href="#" class="d"><img src="http://pics.cssrule.com/pics/o1.jpg" alt="red globe" /></a>
</div>
</body>
</html>
Posts
2 comments:
How would i do this with an overlaying border image?
How would you get this to work with Internet Explorer? I have that code working for chrome and firefox but explorer does not like it
Post a Comment
Note: Only a member of this blog may post a comment.