CSS only lightbox- Click to close & zoom - css

Question

I'm trying to create a versitile (for mobile, desktops and tablets) lightbox pop-up. I'm inputting it through Gravityforms, so the link itself can only be HTML.
This code works- but it's a little messy. It has to be gallery, and text, which I've achieved already. I'm using wordpress 4.0 so if there's a better plugin solution I'm open to it.
A nice transition when opening
Resize to fit mobile/smaller screens
Click background to close
There will be multiple galleries on one page.
My code so far
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
display: none;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color:#333333;
}
.lightbox:target {
/** Show lightbox when it is target */
display: block;
outline: none;
}
.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 .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.75;
transition: opacity ease-in-out 0.5s;
}
.lightbox .content:hover .desc {
opacity:0.8;
}
.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 think this is the kind of transition I want:
html { min-height: 100%; position: relative; }
body { margin: 0; height: 100%; margin-right: 2em; background: #110; }
dl { float: left; }
dd a {
background: #fff; display: inline-block;
transition: 4s box-shadow ease-in;
A zoom feature would be great too, (ie from within the lightbox) but I'm unsure that's possible.
Any help is much appreciated
My latest JSFiddle Click here

Answer 1

A nice transition when opening.
Use CSS transition
Resize to fit mobile/smaller screens Use max-width: 100%You might want to experiment with the length of the description in .desc as it seems to be too long for the width of a mobile screen
Click background to close. I think this can be achieved using javascript.
Check out the FIDDLE here.