Creating a Image Gallery with Caption
In this post we crating a simple image gallery with caption. There is a much simpler way to do this with a list and some very easy CSS. Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page.
Now first we creat a simple HTML structure.
<div class="gallery"> <ul> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> <li><a href="#"><img src="bw1.jpg" /><p>Image Caption</p></a></li> </ul> </div>
CSS Code
Now we Create simple and effective CSS code. Here is the code.
* {margin:0; padding:0;} body { font:100%.1 normal Arial, Helvetica, sans-serif; } a { text-decoration:none; color:#333333; font:82.5% normal Arial, Helvetica, sans-serif } a:hover { color:#FF0000; } img { border:0; } h1 { color:#bbb; font:195% bold Arial, Helvetica, sans-serif; line-height:100%; }.gallery { width:600px; margin:0 auto; } .gallery ul, .gallery ul p { margin:0; padding:0; list-style-type:none; } .gallery ul li { display:inline; } .gallery ul li a { display:block; margin:5px; float:left; padding:5px; width:150px; border:1px solid #ccc; } .gallery ul p { text-align:center; padding:2px 0 2px 0; }
finaly we are done. We have created a image gallery with caption. css-image-gallery-with-caption
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
Riccardosays on : January 15th, 2010 at 9:05 am Said:
Thanks, very useful!
luissays on : October 1st, 2010 at 12:12 am Said:
Hey admin, good job! Very very helpful tutorial! Ive been looking into this for a couple of hours now. Thanks for taking time and making a tutorial like this one.