In this tutorial we will create a simple image gallery with lightbox effect using only CSS3. The idea is to have the gallery thumbnails that are clickable, and once a thumbnail is clicked, the respective image is displayed in large size in the lightbox style, which often refers to a pop-in window with a clickable semi-transparent layer covering the rest of the page. Upon clicking the layer, it closes the window and returns to the page.
There are many fantastic javascript Lightbox solutions available, but in this tutorial we will create the lightbox without using any javascript code. However, please note that the javascript based lightboxes remain much more efficient and cross browser compatible. The purpose of this tutorial is just to make use of some of powerful features of CSS3, and see what results we can achieve with it :)
1. The gallery markup:
Let’s first create a basic structure for the gallery thumbnails with a container centered on the page. We will wrap the thumbnail images and caption inside the link so that whole area of thumbnail and caption becomes clickable.
<div id="gallery"> <ul> <!-- Thumb 1 --> <li> <a href="#img1" class="thumb1"> <img src="images/thumb1.jpg" /> <span>London, United Kingdom</span> </a> </li> <!-- Thumb 2 --> <li> <a href="#img2" class="thumb2"> <img src="images/thumb2.jpg" /> <span>Brussels, Belgium</span> </a> </li> <!-- more thumbs --> <ul> </div>
2. CSS for gallery:
First we’ll want to add some general styles for the page, for example font, width, list style etc.
General page styles:
body {
line-height: 1;
background-color: #F8F8F8;
color: #444444;
font-family: 'Bree Serif', serif;
font-size: 13px;
}
ol, ul {
list-style: none;
}
#content{
margin:0 auto;
width:900px;
}
As you can see above, I have used Bree Serif font from Google web fonts. You can use any font you like, but if you would want to use same font, remember to add the link to the font in the html code.
Image gallery style:
Some margin and paddings for the gallery and unordered list:
#gallery {
margin:20px 0;
}
#gallery ul{
overflow:visible;
padding:20px;
}
#gallery ul li{
display:inline-block;
}
As we have wrapped each image and caption in a hyperlink. So let’s add style for the links:
#gallery a{
display: inline-block;
color: #444444;
padding: 10px;
width:240px;
background-color: white;
margin-right:-80px;
z-index:1;
border: 5px solid rgba(0,0,0,0.1);
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
#gallery .frame span{
display:inline-block;
margin-top:5px;
}
#gallery a:hover{
border: 5px solid rgba(39,25,0,1);
border: 5px solid rgba(0,0,0,0.5);
z-index: 3;
}
Note that we have set the z-index value as 1 for the gallery thumbnails, and on hover we have set higher z-index value, which means the hover image appear on the top of other thumbnails.
We can rotate each of the thumb randomly and change the z-index for some of the thumbs to make them on top or under others. For example:
#gallery .thumb1{
-webkit-transform: rotate(-5deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(-5deg); /* FF3.5+ */
-ms-transform: rotate(-5deg); /* IE9 */
-o-transform: rotate(-5deg); /* Opera 10.5 */
transform: rotate(-5deg);
}
#gallery .thumb2{
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
-ms-transform: rotate(9deg);
-o-transform: rotate(9deg);
transform: rotate(9deg);
}
#gallery .thumb3{
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
z-index:0;
}
That is all for displaying the thumbnail images in the gallery.
3. Lightbox images markup:
When we click on a thumbnail, it should point to the respective large version of the image. So, we need to add HTML markup for the large images. We can place this code outside the gallery div in our html file. Each div should have same id, as referenced by the respective thumbnail.
<!-- Lightbox images --> <!-- image 1 --> <div class="lightbox" id="img1"> <div class="lightbox-content"> <img src="images/img1.jpg" /> <span>London, United Kingdom</span> </div> <a href="#close" class="close" title="Close"></a> </div> <!-- image 2 --> <div class="lightbox" id="img2"> <div class="lightbox-content"> <img src="images/img2.jpg" /> <span>Brussels, Belgium</span> </div> <a href="#close" class="close" title="Close"></a> </div> <!-- image 3 --> <div class="lightbox" id="img3"> <div class="lightbox-content"> <img src="images/img3.jpg" /> <span>Madrid, Spain.</span> </div> <a href="#close" class="close" title="Close"></a> </div> <!-- rest of the images -->
CSS for lightbox:
The lightbox works in a very simple way using the CSS pseudo class :target. The :target matches an element that is target of an identifier (#) in the document URI and allows to apply specific style to it.
So, when we click on any of the thumbnail, which has anchor link for example to #img1, the :target will look for any element with the id #img1 and apply the style to it, that is change its position, so that it becomes visible.
So lets add css for the lightbox container:
.lightbox {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: -100%;
}
We have set the absolute position, starting from top 0. The left -100% position makes sure that it’s not visible before clicking any thumb.
Now once we click a thumb, we want to change its position from -100% to 0 on the left, so that it becomes visible.
.lightbox:target {
left: 0px;
z-index: 8;
}
The the high z-index value of the target will place the lightbox over the other contents of the page.
Now we need to set the position of the lightbox content in the center of the screen.
.lightbox:target div {
background: #ffffff;
position: absolute;
left: 50%;
top: 50%;
z-index: 9;
}
.lightbox-content {
height: 427px;
width: 640px;
margin-top: -214px;
margin-left: -320px;
padding:10px 10px 30px 10px ;
}
Please note that in this tutorial, I have a fixed size content div. If your lightbox content divs do not have same size, you would need to specify size for each of the div. The margin on left and top should be half of the width and height repectively.
Finally, we want to make the lightbox background clickable, so that clicking it closes the lightbox and returns to the page. Therefore set its height and width, 100%.
.close{
position: absolute;
height: 100%;
width: 100%;
background: #000000;
opacity: 0.8;
}
That’s all :)
Browser support:
This works fine with latest versions of Firefox, Chrome, Safari and Opera including Internet Explorer 9.
