A little while ago I rebuilt my homepage. The homepage became an 'About Me' page; more of a landing page than a blog archive. The blog URLs haven't changed, and it's still there - however the move to a landing page is an acknowledgement that I just don't write blog posts as frequently as I used to.
One of the fun things that I added at the top of my landing page is a series of eight images that show who I am and what I enjoy doing. They're all from my own photo collection, and although they're hardly perfect photos they do capture the essence of the past few years of my life.
The images are shown in a simple accordion - only the middle vertical 30% of an image is shown, then when you mouseover an image slice the other images are compressed to show the hovered image in it's entirety.
The images are all 400x400 pixel squares; they're floated left by -150px (with overflow: hidden) to show the 8 even slices. On hover, all of the slices are resized to 20%, except the image the mouse is over: That is changed to 100%.
To make it a little prettier, I use -webkit-transition (CSS3-only), however it isn't as smooth as I'd like.
I've tested in most modern browsers, but as my site isn't high-traffic I haven't tested every possible combination. YMMV.
HTML:
<div id='hero'>
<span><img src='/media/heroimages/hero1.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero2.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero3.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero4.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero5.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero6.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero7.jpg' title='Image Caption'></span>
<span><img src='/media/heroimages/hero8.jpg' title='Image Caption'></span>
</div>
CSS:
#hero span {
/* Show each image as a 120x400 sliver. */
width: 120px;
height: 400px;
float: left;
overflow: hidden;
}
#hero span, #hero span img {
/* Animate the image width changes. Not perfect, but good enough. */
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-webkit-transition-delay: .1s;
-moz-transition-delay: .1s;
-o-transition-delay: .1s;
-ms-transition-delay: .1s;
}
#hero span img {
/* Ensure the vertical slivers show the centre 30% of the image */
text-align: center;
position: relative;
left: -150px;
}
#hero:hover span {
/* When we hover over the #hero block, change all images to 80px (20%)... */
width: 80px;
}
#hero span:hover {
/* ... except for the actual image being hovered, which now becomes 400px (100%) */
width: 400px;
}
#hero span:hover img {
/* Reset the 'left', as it was previous 150px, on hover. */
left: 0;
}
This code is hereby in the public domain; no warranties or support are provided. Good luck.