Awesome CSS3 Photo Gallery

Awesome CSS3 Photo Gallery

8 34560
Awesome CSS3 Photo Gallery

Awesome CSS3 Photo Gallery

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 next CSS3 properties here: user-select, box-sizing, transition, box-shadow and transform.

As the first, I would suggest you to 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 to ‘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, its 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 css3 transformation: rotate. To achieve 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 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!

SIMILAR ARTICLES

Pure CSS3 LavaLamp Menu

115 196235
Page layout with Boostrap 3

0 25100

8 COMMENTS

  1. All the stuff was pretty good sir..
    But the browser compatibility is factor where the IE is not supporting…

  2. Question: When viewed on an iPad, I cannot “close” an image once it has been “opened”…so once one of the images has been touched/opened (on the iPad) to view larger, it stays that way until another one is touched/opened. There is no way to stop the process and make them all go back to thumbnails from that point. Using a desktop/laptop, all I have to do is click on a black space outside the gallery to close them. Any thoughts?

    • Hello eduphilic,
      You can’t go without javascript (and php) in case of comments. You have to add some server-side functions in order to put comments.

  3. Nice tutorial, all functionality is fine with css but browser compatibility issue in IE7,8. Once image is open it not closed, overlapping on-upon. If overlap near about images how can I see/click those image.

  4. Bismillah, thanks a lot, for the script.. I am Blogger of Indoesia. I Permit to post your artikel in my languange…!! Tnaks , it’s very useful for me…!!

Leave a Reply