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);}
}
5 Responses