CSS Photo Gallery - The JAMIE RUTH
If your looking for a Pure CSS Photo Gallery then no doubt you've already come across the Hoverbox and Stu Nicholls Photo Gallery. But isn't the whole point of it all to see your image larger than life? So you can see all the wonderful detail in each and every photo? Don't get me wrong, both of those examples are down right amazing if that's the look you're after. But, if your answer is yes to my above question, then my friend, I present to you "THE JAMIE RUTH"! It's simple, it's clean, and it's beautiful to look at. Oh ya... and it works perfect (including all the cool hover effects) in every browser. By the way, Jamie Ruth is my hot wife.
As you can see from the various versions above, when putting your personal style on this thing, your only limit is your imagination. Keep in mind though, while styling the thumbnail images, you can only separate and style them with padding and borders. If you use any margins to do so, then you get somewhat of a flicker effect as your mouse passes from image to image. However, if that ever so slight flaw does not bother you, then that opens the door to a whole heap of styling options. Thats actually one of the reasons why I did all the different versions listed above - because only being able to use padding and borders to style your hover effects is not the easiest thing to do. So I thought I'd give you a leg up. Plus, I too like options!
The Whole Shebang!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>The JAMIE RUTH</title> <!--[if IE 6]> <style type="text/css"> body{behavior:url("csshover.htc");} </style> <![endif]--> <style type="text/css"> * { margin:0; padding:0; } /* ------------ CSS Photo Gallery ------------ */ #thumbwrap { width:484px; height:558px; border:2px solid #000; position:relative; background:#999; padding:6px; } .thumb .small { float:left; padding:2px; background:#000; border:6px solid #999; } .thumb .small:hover { padding:3px; border:5px solid #999; position:relative; /* Opera 9.5 needs this to show :hover */ } .thumb:hover { border:0; /* IE6 needs this to show large image */ } .thumb span { z-index:1; position:absolute; top:285px; left:12px; visibility:hidden; } .thumb span img { border:2px solid #000; background:#fff; padding:10px 59px; } .thumb:hover span { visibility:visible; } .visible { visibility:visible; } </style> </head> <body> <div id="thumbwrap"> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt="" class="small"><span><img src="images/jamie1big.jpg" alt="" class="visible"></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt="" class="small"><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie3.jpg" alt="" class="small"><span><img src="images/jamie3big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie4.jpg" alt="" class="small"><span><img src="images/jamie4big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie5.jpg" alt="" class="small"><span><img src="images/jamie5big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie6.jpg" alt="" class="small"><span><img src="images/jamie6big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie7.jpg" alt="" class="small"><span><img src="images/jamie7big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie8.jpg" alt="" class="small"><span><img src="images/jamie8big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie9.jpg" alt="" class="small"><span><img src="images/jamie9big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie10.jpg" alt="" class="small"><span><img src="images/jamie10big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie11.jpg" alt="" class="small"><span><img src="images/jamie11big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie12.jpg" alt="" class="small"><span><img src="images/jamie12big.jpg" alt=""></span></a> </div> </body> </html>
That's a bit of a mouthful uh? I hear ya - I like to keep my code as small as possible also. As you can see though, the code starts to get a "little" more complicated once you start adding hover effects and drop shadows. However, I believe in this case the amount of code is well worth the resulting outcome. As the saying goes, if you want the whole omelet, your going to have to be prepared to break some eggs. It's not all that complicated though - lets break it down shall we? I'll start at the top and work my way down.
Let's get IE6 out of the way first! Even though all the images are wrapped in an anchor, IE6 can't show the :hover effect on the thumbnail images. So we'll feed it some whatever:hover to get it in line. It's really simple! Just make a file called csshover.htc and copy/paste this code into it. Then just place body{behavior:url("csshover.htc");} as I have in some IE Conditional Comments (because "behavior" does not validate).
Now on to the drop shadow! Go here to my article named "The Best Damn Drop Shadow Ever - Period!" All the images and information necessary to implement are included therein. Although, this is assuming you want to use the drop shadow as well. If by chance you don't, then just remove the portions of code pertaining to the drop shadow. The code is very well commented on how to do so. Aside from the drop shadow section it self, there are exactly three places (two places in the CSS, and one in the html) that will need to be moved and/or removed (all commented).
The CSS and the html! Sheeeeiiiitttt... thats as clean as it comes baby! I'll just let the code speak for itself. And there you have it - The Best CSS Photo Gallery Ever! I had a lot of fun making it and I'm very proud of it. I hope that you find it to be as cool as I do, and I'm glad I was able to share it! You got to admit though, she's pretty hot right!? And thats "after" having two babies!
