Thumbnail gallery

Thumbnail gallery example css

by stofke

HTML

<!DOCTYPE html>
<html>

<head>
<title>Freebie #1 by www.launchedpixels.com</title>
<meta charset="UTF-8" />

<!-- CSS Layout -->
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- box1 -->
<div class="box1">
    <h3>Thumbnail #1</h3>
    <img src="http://placehold.it/200x150" alt="It's an image" title="" />
    <p>Lorem ipsum dolor sit amet. Cum sociis natoque penatius et magnis</p>
</div>
<!-- /box1 -->

<!-- box2 -->
<div class="box2">
    <h3>Thumbnail #2</h3>
    <img src="http://placehold.it/200x150" alt="It's an image" title="" />
    <p>Lorem ipsum dolor sit amet. Cum sociis natoque penatius et magnis</p>
</div>
<!-- /box2 -->

<!-- box3 -->
<div class="box3">
    <h3>Thumbnail #3</h3>
    <img src="http://placehold.it/200x150" alt="It's an image" title="" />
    <p>Lorem ipsum dolor sit amet. Cum sociis natoque penatius et magnis</p>
</div>
<!-- /box3 -->
<div class="clear"></div>
</body>

</html>

CSS

/***************
* 0. Reset CSS *
****************/ /* Light reset css */

body,div,h3,p,img{margin:0; padding:0;}
h3{font-weight:normal;}
img{border:none;}


/**********
* 1. Body *
***********/

/*
** Body *******************************/
html{font-size:100%;}
body{font-family:Helvetica, Arial, sans-serif; color:#000000; background:#f9f9f9;}


/***************
* 2. Functions *
****************/

div.clear{clear:both;}


/***********
* 3. Boxes *
************/

/*
** Box 1 ****************************/
div.box1{
    margin:30px 0 0 30px;
    padding:0 20px;
    height:248px;
    width:198px;
    background:#ffffff;
    border:1px solid #e7e7e7;
    float:left;
    border-radius:5px;
    }
    
div.box1 h3{
    margin:15px 0 10px 0;
    font-size:16px;
    color:#909090;
    }
    
div.box1 img{
    height:150px;
    width:200px;
    }
    
div.box1 p{
    margin:10px 0;
    font-size:12px;
    color:#bebebe;
    }

/*
** Box 2 *****************************/
div.box2{
    margin:30px 0 0 30px;
    padding:0 20px;
    height:248px;
    width:198px;
    background:#ffffff;
    border:1px solid #e7e7e7;
    border-bottom:3px double #e7e7e7;
    float:left;
    border-radius:5px;
    }
    
div.box2 h3{
    margin:15px 0 10px 0;
    font-size:16px;
    color:#909090;
    }
    
div.box2 img{
    height:150px;
    width:200px;
    }
    
div.box2 p{
    margin:10px 0;
    font-size:12px;
    color:#bebebe;
    }

/*
** Box 3 *****************************/
div.box3{
    margin:30px 0 0 30px;
    padding:0 20px;
    height:248px;
    width:198px;
    background:#ffffff;
    border:1px solid #e7e7e7;
    border-bottom:4px double #e7e7e7;
    float:left;
    border-radius:5px;
    }
    
div.box3 h3{
    margin:15px 0 10px 0;
    font-size:16px;
    color:#909090;
    }
    
div.box3 img{
    height:150px;
    width:200px;
    }
    
div.box3 p{
    margin:10px 0;
    font-size:12px;
    color:#bebebe;
    }