CSS only lightbox- Click to close & zoom -

i'm trying create versitile (for mobile, desktops , tablets) lightbox pop-up. i'm inputting through gravityforms, link can html.

this code works- it's little messy. has gallery, , text, i've achieved already. i'm using wordpress 4.0 if there's better plugin solution i'm open it.

• a nice transition when opening
• resize fit mobile/smaller screens
• click background close

there multiple galleries on 1 page.

my code far

       #gallery .item {      overflow: hidden;     }  #gallery .item img {     height: 100%;      align-self: center;     }  .lightbox {     /** hide 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 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 kind of transition want:

    html { min-height: 100%; position: relative; } body { margin: 0; height: 100%; margin-right: 2em;  background: #110; } dl { float: left; } dd {    background: #fff; display: inline-block; transition: 4s box-shadow ease-in; 

a zoom feature great too, (ie within lightbox) i'm unsure that's possible.

any appreciated

my latest jsfiddle click here

• a nice transition when opening.
  use css transition
• resize fit mobile/smaller screens
  use max-width: 100%
  you might want experiment length of description in .desc seems long width of mobile screen
• click background close.
  i think can achieved using javascript.

---

check out fiddle here.

---