Create a lightbox effect with CSS3

Today we want to show you how to create a lightbox effect using only CSS. The idea is to create multiple thumbnails, when clicked, the corresponding large image is displayed. Using CSS transitions and animations, we can make the appearance of a large image in various nice ways.

With the help of the pseudo-class: target, we can display images and navigate through them.

The beautiful images used in the demo examples by Joanna Kustra are used under the terms of the Attribution-NonCommercial 3.0 Unported Creative Commons License .
')
Please note that these examples will only work in browsers that support the : target pseudo class.

So let's do it!

HTML markup

First, create a set of thumbnails, each of which has a name that will be displayed when you hover the cursor. When you click on the thumbnail, we will show a larger version of the image in a block with the lb-overlay class, which will initially be hidden. So, we will use an unordered list, where each element of the list will contain a thumbnail and a block with a corresponding large image:

<ul class="lb-album"> <li> <a href="#image-1"> <img src="images/thumbs/1.jpg" alt="image01"> <span>Pointe</span> </a> <div class="lb-overlay" id="image-1"> <img src="images/full/1.jpg" alt="image01" /> <div> <h3>pointe <span>/point/</h3> <p>Dance performed on the tips of the toes</p> <a href="#image-10" class="lb-prev"></a> <a href="#image-2" class="lb-next"></a> </div> <a href="#page" class="lb-close">x </a> </div> </li> <li> <!-- ... --> </li> </ul> 

Anchor in thumbnails, for example, href = "# image-1" will point to the element with id image-1 , which is a div class lb-overlay . In order to navigate through the images, we will add two links that point to the previous and the next (large) image.

In order to “close” the lightbox, we will simply click on the link with the class lb-close , which points to the element with the ID page , which is, in our example, the body tag.

Please note that we only use the navigation in the last demo example.

Now let's turn to styles.

CSS

I will omit the prefixes of various browsers for some new properties, so as not to overload the article. But they can, of course, be found in the source files.

Below are the styles of our main layer, unordered list and thumbnails:

 .lb-album{ width: 900px; margin: 0 auto; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; } .lb-album li{ float: left; margin: 5px; position: relative; } .lb-album li > a, .lb-album li > a img{ display: block; } .lb-album li > a{ width: 150px; height: 150px; position: relative; padding: 10px; background: #f1d2c2; box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; border-radius: 4px; } 

The name of each thumbnail will be invisible and we will add a transition for opacity, which will be equal to 1 when we hover the mouse over the thumbnail anchor. We will use a smooth radial gradient as the background:

 .lb-album li > a span{ position: absolute; width: 150px; height: 150px; top: 10px; left: 10px; text-align: center; line-height: 150px; color: rgba(27,54,81,0.8); text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 24px; opacity: 0; background: radial-gradient( center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100% ); transition: opacity 0.3s linear; } .lb-album li > a:hover span{ opacity: 1; } 

The overlay layer will have the same radial gradient, and we will also set the position property to fixed, with zero height and width:

 .lb-overlay{ width: 0px; height: 0px; position: fixed; overflow: hidden; left: 0px; top: 0px; padding: 0px; z-index: 99; text-align: center; background: radial-gradient( center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100% ); } 

As soon as we click on the thumbnail, we will open this block on top of the rest of the screen, but first let's look at the children.

Let's set the styles for the main title and description:

 .lb-overlay > div{ position: relative; color: rgba(27,54,81,0.8); width: 550px; height: 80px; margin: 40px auto 0px auto; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); } .lb-overlay div h3, .lb-overlay div p{ padding: 0px 20px; width: 200px; height: 60px; } .lb-overlay div h3{ font-size: 36px; float: left; text-align: right; border-right: 1px solid rgba(27,54,81,0.4); } .lb-overlay div h3 span, .lb-overlay div p{ font-size: 16px; font-family: Constantia, Palatino, serif; font-style: italic; } .lb-overlay div h3 span{ display: block; line-height: 6px; } .lb-overlay div p{ font-size: 14px; text-align: left; float: left; width: 260px; } 

Let's post a link to close the lightbox just above the image:

 .lb-overlay a.lb-close{ background: rgba(27,54,81,0.8); z-index: 1001; color: #fff; position: absolute; top: 43px; left: 50%; font-size: 15px; line-height: 26px; text-align: center; width: 50px; height: 23px; overflow: hidden; margin-left: -25px; opacity: 0; box-shadow: 0px 1px 2px rgba(0,0,0,0.3); } 

The image will have a maximum height of 100%. We will also add a transition to create translucency. As soon as we “open” a large image, the transparency will be animated. Later we will see how we can use animation for the image.

 .lb-overlay img{ max-height: 100%; position: relative; opacity: 0; box-shadow: 0px 2px 7px rgba(0,0,0,0.2); transition: opacity 0.5s linear; } 

Now let's set the styles for the navigation elements:

 .lb-prev, .lb-next{ text-indent: -9000px; position: absolute; top: -32px; width: 24px; height: 25px; left: 50%; opacity: 0.8; } .lb-prev:hover, .lb-next:hover{ opacity: 1; } .lb-prev{ margin-left: -30px; background: transparent url(../images/arrows.png) no-repeat top left; } .lb-next{ margin-left: 6px; background: transparent url(../images/arrows.png) no-repeat top right; } 

When we click on the thumbnail anchor, it will point to the corresponding large image that is in a block with the lb-overlay class. Thus, in order to find this element, we can use the pseudo-class: target. We will add padding for lb-overlay and “stretch” it by setting the width and height of auto (this is not really necessary) and set right and bottom to 0px. Remember that we have already set top and left before.

 .lb-overlay:target { width: auto; height: auto; bottom: 0px; right: 0px; padding: 80px 100px 120px 100px; } 

Now we will set the transparency for the image and the closing link to 1:

 .lb-overlay:target img, .lb-overlay:target a.lb-close{ opacity: 1; } 

And these are all styles!

Let's also look at the other two options that we use in example 1 and example 2.

In the first example, we made the image appear with the help of animation, changing its scale and increasing its opacity value:

 .lb-overlay:target img { animation: fadeInScale 1.2s ease-in-out; } @keyframes fadeInScale { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } 

In the second example, we created the opposite effect, that is, the image scale decreases:

 .lb-overlay:target img { animation: scaleDown 1.2s ease-in-out; } @-webkit-keyframes scaleDown { 0% { transform: scale(10,10); opacity: 0; } 100% { transform: scale(1,1); opacity: 1; } } 

Demo examples

Example 1: Scale-up / fade-in animation
Example 2: Scale-down / fade-in animation
Example 3: Fade-in & navigation

As you will see, each browser works completely differently when it comes to transitions / animations. By adjusting the duration, temporal functions and delays, you can make the effects smoother, i.e. You can change the animation time for Firefox just by changing the -moz-properties.

It's all! I hope you enjoyed these examples! Mary lou

Download source