Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created August 27, 2012 18:25
Show Gist options
  • Save james2doyle/3491096 to your computer and use it in GitHub Desktop.
Save james2doyle/3491096 to your computer and use it in GitHub Desktop.
no-js lightbox
/**
* no-js lightbox
*/
body {
margin: 100px 0 0 100px;
}
.thumbs li {
position: relative;
float: left;
margin: 20px 20px 0 0;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid #000;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
}
.thumbs li img {
border-radius: inherit;
opacity: 0.3;
transform: scale(0.5) translate3d(-25%,-30%,0);
transform-origin: top left;
transition: transform 0.1s ease-in-out;
}
.thumbs li:hover img {
opacity: 0.9;
}
.thumbs li:active {
z-index: 2;
margin: 0 -400px -300px 0;
width:400px;
height:300px;
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.thumbs li:active img {
opacity: 1;
transform: scale(1) translate3d(0,0,0);
transform-origin: center;
}
<ul class="thumbs">
<li><img src="http://dribbble.s3.amazonaws.com/users/2559/screenshots/704560/screen_shot_2012-08-27_at_9.46.19_am.png" /></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/14827/screenshots/704088/untitled-1.png" /></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/43046/screenshots/704179/blog.png" /></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/2559/screenshots/704560/screen_shot_2012-08-27_at_9.46.19_am.png" /></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/14827/screenshots/704088/untitled-1.png" /></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/43046/screenshots/704179/blog.png" /></li>
</ul>​
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment