<!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">
<meta name="Author" content="b.b. Troy III p.a.e.">
<title>Image Gallery</title>
<style type="text/css">
*
{
margin: 0;
padding:0;
border: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
body
{
background: white;
width: 774px;
margin: 5px auto;
}
.gallery
{
position: relative;
height: 100%;
width: 100%;
margin: 4px 0 4px 0px;
background: url('http://www.layoutstar.com/images/allbackgrounds/bgs/artistic/artistic_background_01.gif') no-repeat 73% 48%;
}
.thumb span
{
position: absolute;
top: 1px;
left: 218px;
border: outset 1px #f0f9ff;
visibility: hidden;
text-decoration: none;
color: black;
padding: 30px;
}
.n1:active span,.n1:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/dry-drought-arid-dirt.jpg')
}
.n2:active span,.n2:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/Sun-Valley-golf-course.jpg')
}
.n3:active span,.n3:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/close-up-colorful-iris.jpg')
}
.n4:active span,.n4:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/stress-fish-blender.jpg')
}
.n5:active span,.n5:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/paragliding-valley-sport.jpg')
}
.n6:active span,.n6:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/hurricane-space-earth-horizontal.jpg')
}
.n7:active span,.n7:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/world-globe-in-oyster-beach.jpg')
}
.n8:active span,.n8:focus span
{
background: url('http://www.billfrymire.com/gallery/webJpgs/periodic-table-chemistry-science.jpg')
}
.thumb:active span,.thumb:focus span
{
visibility: visible;
background-repeat: no-repeat;
background-position: center 30%;
background-color: #f9f9fa;
}
.thumb:active img,.thumb:focus img
{
border: 1px #666 solid
}
a img
{
height: 102px;
width: 102px;
}
span img
{
visibility: hidden;
width: 490px;
height: 320px;
display: block;
}
h1
{
padding: 30px 20px 30px 15px;
background-color: #444;
color: #f0f9ff;
padding-left: 20px;
}
h1 i
{
color: #aaff44;
}
b.o,b.m,b.x,b.i
{
display: block; background: #444; padding-top: 1px;
}
b.o
{
margin: 0px 6px
}
b.m
{
margin: 0px 3px
}
b.x
{
margin: 0px 2px
}
b.i
{
margin: 0px 1px; padding-top:2px
}
h2, h2 span
{
overflow: hidden;
font: bold 38pt/1.2em georgia, 'Trebuchet MS';
position: relative;
width: 100%;
text-align: center;
color: #999;
background: #444
}
h2 span, h2 br
{
color: #ddd;
top: 0px; left:0px;
position: absolute;
display: block;
width: 100%;
height: .575em;
}
h1 small
{
font-size: 0.5em;
display: block;
}
#botm
{
text-align: center;
width: 100%;
color: #444;
line-height: 2em;
background: #fcfdfe;
}
.gallery img
{
border: 1px #fff outset
}
a
{
outline:none 0;
}
#au
{
background: url('http://i35.tinypic.com/xbkdg9.jpg') repeat-x;
font: normal 11px Tahoma;
color: #000;
border-top: 1px solid #ddd;
height: 25px;
line-height: 25px;
margin-top: 5px
}
</style>
<!--[if IE]>
<style>
a {outline:expression(hideFocus='true')
</style>
<![endif]-->
</head>
<body>
<div>
<b class="o"></b>
<b class="m"></b>
<b class="x"></b>
<b class="i"></b>
<h1>Pure <i>CSS</i> Image Gallery demo<br><small>with <i>on click</i> swap</small></h1>
<b class="i"></b>
<b class="x"></b>
<b class="m"></b>
<b class="o"></b>
</div>
<div id="au">
• Aeneas Dardanus •
</div>
<div class="gallery">
<a class="thumb n1" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/dry-drought-arid-dirt.jpg" alt=''><span>
<img src="" alt=''><br>Dried... (Bonneville Salt Flats)</span></a>
<a class="thumb n2" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/Sun-Valley-golf-course.jpg" alt=''><span>
<img src="" alt=''><br>Sun Valley, -looks green... (Idaho USA golf course)</span></a>
<br>
<a class="thumb n3" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/close-up-colorful-iris.jpg" alt=''><span>
<img src="" alt=''><br>Some Colorful surprise.</span></a>
<a class="thumb n4" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/stress-fish-blender.jpg" alt=''><span>
<img src="" alt=''><br>Feeling safe?</span></a>
<br>
<a class="thumb n5" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/paragliding-valley-sport.jpg" alt=''><span>
<img src="" alt=''><br>Watch this...</span></a>
<a class="thumb n6" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/hurricane-space-earth-horizontal.jpg" alt=''><span>
<img src="" alt=''><br>Hurricane or typhoon? -Can't tell - but it's Huge!</span></a>
<br>
<a class="thumb n7" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/world-globe-in-oyster-beach.jpg" alt=''><span>
<img src="" alt=''><br>...Some Nut in a shelve</span></a>
<a class="thumb n8" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/periodic-table-chemistry-science.jpg" alt=''><span>
<img src="" alt=''><br>Need some chemistry to start things over.</span></a>
</div>
<div id=botm>
<p><small> Gallery <i>Images</i> are a property of
<a href='http://www.billfrymire.com' title="you can see more here">bill frymire visuals</a>
|•| b.b. Troy III p.a.e. </small></p>
</div>
<div style='border-top: solid 3px #af4; margin:0'>
<H2 title="TROY III"> TROY III <br><span> TROY III </span> </H2>
<b class="i"></b>
<b class="x"></b>
<b class="m"></b>
<b class="o"></b>
</div>
</body>
</html>You
© 2012 DaniWeb® LLC
