WordPress Hosting
Free Photos
WordPress Themes

Responsive CSS Lightbox with No JavaScript

HTML
<div id="content"> <h2>CSS3 Lightbox</h2> <a href="#image1" class="wiggle"><img src="http://placehold.it/150x150"/></a> <div class="lightbox short-animate" id="image1"> <img class="long-animate" src="http://placehold.it/650x650"/> </div> <div id="lightbox-controls" class="short-animate"> <a id="close-lightbox" class="long-animate" href="#!">Close Lightbox</a> </div> </div>
CSS
* { margin:0; padding:0; box-sizing:border-box; } html,body { height:100%; max-height:100%; } body { background:#476C9B; } h2 { font-weight:200; font-size:40px; padding:50px 0; text-align:center; color:#ADD9F4; } .wiggle { display:block; margin:0 auto; width:150px; height:150px; box-shadow:8px 8px 1px 0 rgba(0,0,0,.15); } .wiggle:hover { -webkit-animation:none; } .short-animate { -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -ms-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out; } .long-animate { -webkit-transition: .5s .5s ease-in-out; -moz-transition: .5s .5s ease-in-out; -ms-transition: .5s .5s ease-in-out; -o-transition:.5s .5s ease-in-out; transition:.5s .5s ease-in-out; } html,body { height:100%; min-height:100%; } .lightbox { position:fixed; top:-100%; bottom:100%; left:0; right:0; background:#984447; z-index:501; opacity:0; } .lightbox img { position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; max-width:0%; max-height:0%; } #lightbox-controls { position:fixed; height:70px; width:70px; top:-70px; right:0; z-index:502; background:rgba(0,0,0,.1); } #close-lightbox { display:block; position:absolute; overflow:hidden; height:50px; width:50px; text-indent:-5000px; right:10px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #close-lightbox:before { content:''; display:block; position:absolute; height:0px; width:3px; left:24px; top:0; background:white; border-radius:2px; -webkit-transition: .5s .5s ease-in-out; -moz-transition: .5s .5s ease-in-out; -ms-transition: .5s .5s ease-in-out; -o-transition:.5s .5s ease-in-out; transition:.5s .5s ease-in-out; } #close-lightbox:after { content:''; display:block; position:absolute; width:0px; height:3px; top:24px; left:0; background:white; border-radius:2px; -webkit-transition: .5s 1s ease-in-out; -moz-transition: .5s 1s ease-in-out; -ms-transition: .5s 1s ease-in-out; -o-transition:.5s 1s ease-in-out; transition:.5s 1s ease-in-out; } .lightbox:target { top:0%; bottom:0%; opacity:1; } .lightbox:target img { max-width:100%; max-height:100%; } .lightbox:target ~ #lightbox-controls { top:0px; } .lightbox:target ~ #lightbox-controls #close-lightbox:after { width:50px; } .lightbox:target ~ #lightbox-controls #close-lightbox:before { height:50px; } @-webkit-keyframes wiggle { 0% { -webkit-transform:rotate(2deg); } 20% {-webkit-transform:rotate(-2deg);} 40% {-webkit-transform:rotate(2deg);} 60% {-webkit-transform:rotate(-2deg);} 80% {-webkit-transform:rotate(2deg);} 100% {-webkit-transform:rotate(-2deg);} }
JAVASCRIPT
Expand for more options Login