HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 110 posts at DZone. You can read more from them at their website. View Full User Profile

Awesome CSS3 Photo Gallery

04.05.2012
| 7141 views |
  • submit to reddit
In our new tutorial I am going to develop an awesome image lightbox-like gallery with using CSS3 (and without any javascript!). And yes, you heard right. Today, we won’t use scripts at all. I am going to use these CSS3 properties: user-select, box-sizing, transition, box-shadow and transform.

First, I suggest you download the source files and keep the demo opened in a tab for better understanding.

Live Demo

download result

So, lets start.

Step 1. HTML

Everything is very easy, isn’t it? You can just focus your attention only on the ‘tabindex’ attribute. This property sets the tab order for elements.

index.html
<div class="gallery">
    <a tabindex="1"><img src="images/1.jpg"></a>
    <a tabindex="2"><img src="images/2.jpg"></a>
    <a tabindex="3"><img src="images/3.jpg"></a>
    <a tabindex="4"><img src="images/4.jpg"></a>
    <a tabindex="5"><img src="images/5.jpg"></a>
    <a tabindex="6"><img src="images/6.jpg"></a>
    <a tabindex="7"><img src="images/7.jpg"></a>
    <a tabindex="8"><img src="images/8.jpg"></a>
    <a tabindex="9"><img src="images/9.jpg"></a>
    <a tabindex="10"><img src="images/10.jpg"></a>
    <a tabindex="11"><img src="images/11.jpg"></a>
    <a tabindex="12"><img src="images/12.jpg"></a>
</div>

Step 2. CSS

Now, it's time to style our gallery. Don’t forget to include our CSS file in the head section of the result page.

css/main.css
/* Photo Gallery styles */
.gallery {
    margin: 100px auto 0;
    width: 800px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}

/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.gallery a:focus img {
    cursor: default;
    height: 250%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 250%;
    z-index: 25;

    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 transform rules */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

As you can see, in order to have our images look like polaroid photos, I use the css3 transformation: rotate. To achieve the popup effect I use special selector ‘:focus’ (this pseudo-class matches any element that has keyboard input focus). Do you remember that we made different ‘tabindex’ attributes? Now, it will allow you to use even ‘tab’ (or ‘shift+tab’) keyboard button to switch between images. Its nice, isn’t it?

Live Demo

download result

Conclusion

Thats all! Today we have created a new awesome photo gallery with CSS3. It is easy to add your own images, you have just modify our HTML. You are free to modify our gallery and use it at your websites. Feel free to share our tutorials with your friends. Good luck!

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)