css - Lightbox with transition -

i wanted smooth transition of fullscreen lightbox, actual code is

<a href="#_" class="lightbox" id="img1"> <img src="images/photo.jpg"> </a> 

and style:

.lightbox {     display: none;     position: fixed;     z-index: 999;     width: 100%;     height: 100%;     text-align: center;     top: 0;     left: 0;     background: rgba(0,0,0,0.8); } .lightbox img {     max-width: 90%;     max-height: 80%;     margin-top: 2%; } .lightbox:target {     outline: none;     display: block;     transition:all 1s; } 

it's simple, transition:all seems don't work display block/none... idea?

display block/none not allow transition run.

you must use visibility , opacity(for cross browser support).

so code this:

.lightbox {     display: block;     visibility: hidden;     opacity: 0;     position: fixed;     z-index: 999;     width: 100%;     height: 100%;     text-align: center;     top: 0;     left: 0;     background: rgba(0,0,0,0.8);     transition:all 1s; } .lightbox img {     max-width: 90%;     max-height: 80%;     margin-top: 2%; } .lightbox:target {     outline: none;     visibility: visible;     opacity: 1; }