lightbox.scss (2383B)
1 .short-animate { 2 -webkit-transition:.5s ease-in-out; 3 -moz-transition:.5s ease-in-out; 4 -ms-transition:.5s ease-in-out; 5 -o-transition:.5s ease-in-out; 6 transition:.5s ease-in-out; 7 } 8 9 .long-animate { 10 -webkit-transition: .5s .5s ease-in-out; 11 -moz-transition: .5s .5s ease-in-out; 12 -ms-transition: .5s .5s ease-in-out; 13 -o-transition:.5s .5s ease-in-out; 14 transition:.5s .5s ease-in-out; 15 } 16 17 .lightbox { 18 position:fixed; 19 top:-100%; 20 bottom:100%; 21 left:0; 22 right:0; 23 background: rgba(161, 161, 161, 0.8); 24 z-index:501; 25 opacity:0; 26 } 27 28 .lightbox img { 29 position:absolute; 30 margin:auto; 31 top:0; 32 left:0; 33 right:0; 34 bottom:0; 35 max-width:0%; 36 max-height:0%; 37 } 38 39 40 .lightbox video { 41 position:absolute; 42 margin:auto; 43 top:0; 44 left:0; 45 right:0; 46 bottom:0; 47 max-width:0%; 48 max-height:0%; 49 } 50 51 #lightbox-controls { 52 position:fixed; 53 height:70px; 54 width:70px; 55 top:-70px; 56 right:0; 57 z-index:502; 58 background:rgba(0,0,0,.1); 59 } 60 61 #close-lightbox { 62 display:block; 63 position:absolute; 64 overflow:hidden; 65 height:50px; 66 width:50px; 67 text-indent:-5000px; 68 right:10px; 69 top:10px; 70 -webkit-transform:rotate(45deg); 71 -moz-transform:rotate(45deg); 72 -ms-transform:rotate(45deg); 73 -o-transform:rotate(45deg); 74 transform:rotate(45deg); 75 } 76 77 #close-lightbox:before { 78 content:''; 79 display:block; 80 position:absolute; 81 height:0px; 82 width:3px; 83 left:24px; 84 top:0; 85 background:white; 86 border-radius:2px; 87 -webkit-transition: .5s .5s ease-in-out; 88 -moz-transition: .5s .5s ease-in-out; 89 -ms-transition: .5s .5s ease-in-out; 90 -o-transition:.5s .5s ease-in-out; 91 transition:.5s .5s ease-in-out; 92 } 93 94 #close-lightbox:after { 95 content:''; 96 display:block; 97 position:absolute; 98 width:0px; 99 height:3px; 100 top:24px; 101 left:0; 102 background:white; 103 border-radius:2px; 104 -webkit-transition: .5s 1s ease-in-out; 105 -moz-transition: .5s 1s ease-in-out; 106 -ms-transition: .5s 1s ease-in-out; 107 -o-transition:.5s 1s ease-in-out; 108 transition:.5s 1s ease-in-out; 109 } 110 111 .lightbox:target { 112 top:0%; 113 bottom:0%; 114 opacity:1; 115 } 116 117 .lightbox:target img { 118 max-width:100%; 119 max-height:100%; 120 } 121 .lightbox:target video { 122 max-width:100%; 123 max-height:100%; 124 } 125 126 .lightbox:target ~ #lightbox-controls { 127 top:0px; 128 } 129 130 .lightbox:target ~ #lightbox-controls #close-lightbox:after { 131 width:50px; 132 } 133 134 .lightbox:target ~ #lightbox-controls #close-lightbox:before { 135 height:50px; 136 }