Grains Of Sand | Web Design, CSS Demos & HTML5 Templates by tupence

HTML

• <ul>
• <li title="Bassenthwaite, Keswick"><img src="image01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
• <li title="Somewhere near Keswick"><img src="image02.jpg" width="200" height="133" alt="Above Keswick"></li>
• <li title="Grizedale, Cumbria"><img src="image03.jpg" width="200" height="133" alt="Grizedale"></li>
• </ul>

CSS

• none yet

HTML

• <ul id="caption">
• <li title="Bassenthwaite, Keswick"><img src="image01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
• <li title="Somewhere near Keswick"><img src="image02.jpg" width="200" height="133" alt="Above Keswick"></li>
• <li title="Grizedale, Cumbria"><img src="image03.jpg" width="200" height="133" alt="Grizedale"></li>
• </ul>

CSS

• ul#caption {
• list-style-type:none; /*remove the bullet point from the list items*/
• }
• l#caption li{
• display:inline-block; /*places the images in a line*/
• padding:0 20px; /*padding around the images*/
• /*style the caption text*/
• font-size:90%;
• font-family:'droid sans', sans-serif; /*Droid Sans is available at Google Webfonts*/
• color:#525252;
• text-align:center;
• }

• /**Add a small drop shadow to the images**/
• #caption img{
• -webkit-box-shadow: 2px 2px 10px #919191;
• -moz-box-shadow: 2px 2px 10px #919191;
• box-shadow: 2px 2px 10px #919191;
• }

HTML

• <ul id="caption">
• <li class="below" title="Bassenthwaite, Keswick"><img src="../assets/before01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
• <li class="above" title="Somewhere near Keswick"><img src="../assets/before02.jpg" width="200" height="133" alt="Above Keswick"></li>
• <li class="below" title="Grizedale, Cumbria"><img src="../assets/before03.jpg" width="200" height="133" alt="Grizedale"></li>
• </ul>

CSS

• li.below:after{ /* by using :after we place the caption after the image, when used with display:block this will be underneath the image*/
• content: attr(title); /*places the contents of title below the image*/
• display:block; /*puts the caption on its own line instead of at the side of the image*/
• }
• li.above:before{ /* by using :before we place the caption before the image, when used with display:block this will be on top of the image*/
• content: attr(title); /*places the contents of title below the image*/
• display:block; /*puts the caption on its own line instead of at the side of the image*/
• }