Sopov.com freelancer, html and css tips and tricks

How to create small image gallery using CSS only?

I created simple image switcher gallery, without any JavaScript. And it works in most browsers: MAC: FF, Safari; PC: FF, GChrome, IE 7/8 (IE6 doesn't support).

Here is an example what we have to get:

HTML Code:

<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>

CSS Code:

<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>

And here is video tutorial how to create small image gallery CSS only:

Adobe Flash Player not installed or older than 9.0.115!

Big thx for video: css-tricks.com