How to make a better Photo Gallery

One of the ways I tried to improve my website was by making my photo gallery more presentable. There is a number of ways to do this, such as a javascript gallery, but I decided to do it purely by CSS. I simply searched “free css photo gallery” on google and many pages showed up. This is the CSS code I decided to use:

/* =Hoverbox Code———————————————————————-*/
.hoverbox{ cursor: default; list-style: none; margin-left:5em;}
.hoverbox a{ cursor: default;}
.hoverbox a .preview{ display: none;}
.hoverbox a:hover .preview{ display: block; position: absolute; top: -33px; left: -45px; z-index: 1;}
.hoverbox img{ background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 200px; height: 150px;}
.hoverbox li{ background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative;}
.hoverbox .preview{ border-color: #000; width: 400px; height: 300px;}

This code produces a more professional looking photogallery and creates a larger hover image when the mouse hovers over a picture. To use in your site, use this code,except change the image location:

<ul class=”hoverbox”>
<li>
<a href=”#”><img src=”New Resized Pictures/JPEG/IMG_20100928_173430.jpg” alt=”description” /><img src=”New Resized Pictures/JPEG/IMG_20100928_173430.jpg” alt=”description” /></a>
</li>
</ul>

To check out what this looks like, just go to my page here

Advertisements

~ by mdeang2 on November 23, 2010.

 
%d bloggers like this: