HTML Code:
{CODE type:php;}
<div class=”gallery-wrapper”>
<a href=”/” class=”background”></a>
<a href=”/” class=”one”><span>Image One</span></a>
<a href=”/” class=”two”><span>Image Two</span></a>
<a href=”/” class=”three”><span>Image Three</span></a>
<a href=”/” class=”four”><span>Image Four</span></a>
</div>
{/CODE}
CSS Code:
{CODE type:php;}
<style>
.gallery-wrapper {
width: 300px; /* Width of our Images */
margin: 30px auto;
position: relative; /* This is necessary, for our Image position */
}
.gallery-wrapper a {
display: block;
width: 300px; /* Width of our images */
height: 300px; /* Height of our image */
position: absolute; /* This is necessary, for our Image position */
top: 0;
left: 0;
font-family: Verdana;
font-size: 14px;
color: #888;
text-decoration: none;
cursor: pointer;
}
.one {
background: url(‘images/image1.jpg’) no-repeat 0 0; /* Our First image */
}
.two {
background: url(‘images/image2.jpg’) no-repeat 0 0; /* Our Second image */
}
.three {
background: url(‘images/image3.jpg’) no-repeat 0 0; /* Our Third image */
}
.four {
background: url(‘images/image4.jpg’) no-repeat 0 0; /* Our Fourth image */
}
.background {
background: url(‘images/image5.gif’) no-repeat 0 0; /* Our Background image */
z-index: 1;
}
.gallery-wrapper a span {
position: absolute; /* This is necessary, for our Links position */
width: 150px; /* This width is half of our Image width */
background: #333;
}
.one span { /* First link position */
left: 0;
bottom: -30px;
}
.two span { /* Second link position */
left: 150px;
bottom: -30px;
}
.three span { /* Third link position */
left: 0;
bottom: -60px;
}
.four span { /* Fourth link position */
left: 150px;
bottom: -60px;
}
.gallery-wrapper a:hover { /* This is necessary, for image roll-over */
z-index: 2;
}
.gallery-wrapper a:hover span {
background: #eee;
}
</style>
{/CODE}
And here is video tutorial how to create small image gallery CSS only:
{m4v}image_gallery{/m4v}
Big thx for video: css-tricks.com