Home » Tutorials

Awesome CSS3 Photo Gallery

Tutorials
Author Reading 7 min Views 65 Published by Modified by

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.

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Conclusion
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

01 <div class="gallery">
02     <a tabindex="1"><img src="images/1.jpg"></a>
03     <a tabindex="2"><img src="images/2.jpg"></a>
04     <a tabindex="3"><img src="images/3.jpg"></a>
05     <a tabindex="4"><img src="images/4.jpg"></a>
06     <a tabindex="5"><img src="images/5.jpg"></a>
07     <a tabindex="6"><img src="images/6.jpg"></a>
08     <a tabindex="7"><img src="images/7.jpg"></a>
09     <a tabindex="8"><img src="images/8.jpg"></a>
10     <a tabindex="9"><img src="images/9.jpg"></a>
11     <a tabindex="10"><img src="images/10.jpg"></a>
12     <a tabindex="11"><img src="images/11.jpg"></a>
13     <a tabindex="12"><img src="images/12.jpg"></a>
14 </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

001 /* Photo Gallery styles */
002 .gallery {
003     margin: 100px auto 0;
004     width: 800px;
005 }
006 .gallery a {
007     display: inline-block;
008     height: 135px;
009     position: relative;
010     width: 180px;
011     /* CSS3 Prevent selections */
012     -moz-user-select: none;
013     -webkit-user-select: none;
014     -khtml-user-select: none;
015     user-select: none;
016 }
017 .gallery a img {
018     border: 8px solid #fff;
019     border-bottom: 20px solid #fff;
020     cursor: pointer;
021     display: block;
022     height: 100%;
023     left: 0px;
024     position: absolute;
025     top: 0px;
026     width: 100%;
027     z-index: 1;
028     /* CSS3 Box sizing property */
029     -moz-box-sizing: border-box;
030     -webkit-box-sizing: border-box;
031     -o-box-sizing: border-box;
032     box-sizing: border-box;
033     /* CSS3 transition rules */
034     -webkit-transition: all 1.0s ease;
035     -moz-transition: all 1.0s ease;
036     -o-transition: all 1.0s ease;
037     transition: all 1.0s ease;
038     /* CSS3 Box Shadow */
039     -moz-box-shadow: 2px 2px 4px #444;
040     -webkit-box-shadow: 2px 2px 4px #444;
041     -o-box-shadow: 2px 2px 4px #444;
042     box-shadow: 2px 2px 4px #444;
043 }
044 /* Custom CSS3 rotate transformation */
045 .gallery a:nth-child(1) img {
046     -moz-transform: rotate(-25deg);
047     -webkit-transform: rotate(-25deg);
048     transform: rotate(-25deg);
049 }
050 .gallery a:nth-child(2) img {
051     -moz-transform: rotate(-20deg);
052     -webkit-transform: rotate(-20deg);
053     transform: rotate(-20deg);
054 }
055 .gallery a:nth-child(3) img {
056     -moz-transform: rotate(-15deg);
057     -webkit-transform: rotate(-15deg);
058     transform: rotate(-15deg);
059 }
060 .gallery a:nth-child(4) img {
061     -moz-transform: rotate(-10deg);
062     -webkit-transform: rotate(-10deg);
063     transform: rotate(-10deg);
064 }
065 .gallery a:nth-child(5) img {
066     -moz-transform: rotate(-5deg);
067     -webkit-transform: rotate(-5deg);
068     transform: rotate(-5deg);
069 }
070 .gallery a:nth-child(6) img {
071     -moz-transform: rotate(0deg);
072     -webkit-transform: rotate(0deg);
073     transform: rotate(0deg);
074 }
075 .gallery a:nth-child(7) img {
076     -moz-transform: rotate(5deg);
077     -webkit-transform: rotate(5deg);
078     transform: rotate(5deg);
079 }
080 .gallery a:nth-child(8) img {
081     -moz-transform: rotate(10deg);
082     -webkit-transform: rotate(10deg);
083     transform: rotate(10deg);
084 }
085 .gallery a:nth-child(9) img {
086     -moz-transform: rotate(15deg);
087     -webkit-transform: rotate(15deg);
088     transform: rotate(15deg);
089 }
090 .gallery a:nth-child(10) img {
091     -moz-transform: rotate(20deg);
092     -webkit-transform: rotate(20deg);
093     transform: rotate(20deg);
094 }
095 .gallery a:nth-child(11) img {
096     -moz-transform: rotate(25deg);
097     -webkit-transform: rotate(25deg);
098     transform: rotate(25deg);
099 }
100 .gallery a:nth-child(12) img {
101     -moz-transform: rotate(30deg);
102     -webkit-transform: rotate(30deg);
103     transform: rotate(30deg);
104 }
105 .gallery a:focus img {
106     cursor: default;
107     height: 250%;
108     left: -150px;
109     top: -100px;
110     position: absolute;
111     width: 250%;
112     z-index: 25;
113     /* CSS3 transition rules */
114     -webkit-transition: all 1.0s ease;
115     -moz-transition: all 1.0s ease;
116     -o-transition: all 1.0s ease;
117     transition: all 1.0s ease;
118     /* CSS3 transform rules */
119     -moz-transform: rotate(0deg);
120     -webkit-transform: rotate(0deg);
121     -o-transform: rotate(0deg);
122     transform: rotate(0deg);
123 }

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!

Rate article
© 2025 Script Tutorials