产品设计

Create a Pure CSS Image Lightbox

微信扫一扫,分享到朋友圈

Create a Pure CSS Image Lightbox
0

Today I’m going to show you how to create a Pure CSS Image Lightbox. We’re going to use the :target selector for our Lightbox popup . So all we need to do, is create a list of images, that are wrapped in anchor tags, that link to #img1 , #img2 etc etc… and then we need to create an other list, with same images that are hidden by default.

Live Demo Source Code

Basically the first list is our gallery and when we click on an image, the same image from the other list will pop up over the page, but in a bigger size and in the middle of the screen. And if you click on the image again, or off the image it’ll disappear.

Creating the Image Lightbox

The Image Gallery

For the gallery all we have to do, is list our images, using the tag and wrap it around with an


The Lightbox

The lightbox’s html is pretty much the same as the gallery. The important thing here, is that the image’s ID has to match with the link from the gallery. For example for the first image, the link is #img1 then the ID for this image in the lightbox needs to be img1







The CSS

And finally we apply the CSS. The Lightbox is hidden by default. The image from them only appear when the images are clicked in the gallery. You can also notice that the URL changes to #img1, #img2 etc when the images are clicked and the lightbox popped up.


#gallery a {
    text-decoration:none;
    }

#gallery .item {
    width: 200px; height: 200px; overflow: hidden;
    float: left;
    border: 5px solid #333;
    margin: 5px;
    }

#gallery .item a {
    overflow: hidden;
    }

#gallery .item a img {
    height: 100%;
    align-self: center;
    }

.lightbox {
    /** Hide the lightbox */
    opacity: 0;

    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    color:#333333;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    }

.lightbox:target {
    /** Show lightbox when it is target */
    opacity: 1;
    outline: none;
    top: 0;
}

.lightbox .box {
  	width: -webkit-min-content;
  	width: -moz-min-content;
  	width: min-content;
    min-width:500px;
 	margin: 2% auto;
    padding:10px 20px 10px 20px;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #777777;
    }

.lightbox .title {
    margin:0;
    padding:0 0 10px 0px;
    border-bottom:1px #ccc solid;
    font-size:22px;
    }

.lightbox .content {
    display:block;
    position:relative;
    }

.lightbox .close {
    display:block;
    float:right;
    text-decoration:none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:22px;
    color:#858585;
    }

.clear {
    display:block;
    clear:both;
    }

And at this point you should be done, and your image lightbox should work.

Adding Next and Previous Button and Caption

To be able to add next, previous and close button, we need to restructure the html code for the lightbox. Like so:





As you can see, all we did is we added two anchor tags ( a tags ) after the #content dive and we also added a paragraph tag ( p tag ) with the class of .desc . The anchors are for next and previous buttons, both have the classes ( .next and .prev ). And to change the image description, simply change the text in the paragraph with class of “Desc”.

The image description will only show up if u hover over the image itself. By default it’s also hidden.

After you’ve updated the lightbox codes, don’t forget to add your images. Also, we need to add the code below the code above in your stylesheet.

.lightbox .content .desc {
    z-index:99;
    bottom:0;
    position:absolute;
    padding:10px;
    margin:0 0 4px 0;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:17px;
    opacity:0;
    transition: opacity ease-in-out 0.5s;
    }    
.lightbox .content:hover .desc    {
    opacity:1;
}
.lightbox .next,
.lightbox .prev,
.lightbox .close {
    display:block;
    text-decoration:none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:22px;
    color:#858585;
    }
.prev {
    float:left;
    }
.next,
.close {
    float:right;
    }
.clear {
    display:block;
    clear:both;
    }

I hope this helps �� If you have an question, please feel free to leave a comment down below. Also if you know a better way of doing this, or just an other way, let us know in the comments down below. And please consider sharing this with your fellow designers!

阅读原文...


Web Designer Hut

Turning everything into a mobile phone: Redemption

上一篇

Learning Android gestures

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Create a Pure CSS Image Lightbox

长按储存图像,分享给朋友