Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created September 1, 2012 05:56
Show Gist options
  • Save james2doyle/3565044 to your computer and use it in GitHub Desktop.
Save james2doyle/3565044 to your computer and use it in GitHub Desktop.
no-js image preview
/**
* no-js image preview
*/
#no-js-g > * {
box-sizing: border-box;
}
#no-js-g ul {
margin: 0;
padding: 0;
}
#no-js-g ul li {
list-style: none;
margin: 0;
padding: 0;
}
#no-js-g ul li a {
display: block;
overflow: hidden;
height: 120px;
width: 120px;
overflow: hidden;
border: 1px solid #333;
border-radius: 5px;
background: -webkit-linear-gradient(top, #555 0%,#000 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-transform: translate3d(0, 0, 0);
}
#no-js-g ul li a img {
float: left;
opacity: 0.3;
-webkit-transform: scale(0.5);
-webkit-transform-origin: top left;
border-radius: inherit;
}
#no-js-g ul li a:hover img {
opacity: 0.4;
}
@-webkit-keyframes out {
0% {
-webkit-transform: translate3d(0, -95px, 0);
}
70% {
-webkit-transform: translate3d(140px, -95px, 0);
}
100% {
-webkit-transform: translate3d(140px, -95px, 0);
}
}
@-webkit-keyframes out-first {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
70% {
-webkit-transform: translate3d(140px, 0, 0);
}
100% {
-webkit-transform: translate3d(140px, 0, 0);
}
}
@-webkit-keyframes out-last {
0% {
-webkit-transform: translate3d(0, -200px, 0);
}
70% {
-webkit-transform: translate3d(140px, -200px, 0);
}
100% {
-webkit-transform: translate3d(140px, -200px, 0);
}
}
#no-js-g ul li:target a {
width: 400px;
height: 300px;
position: relative;
z-index: 1;
margin-bottom: -200px;
-webkit-animation: out 0.5s both alternate ease;
-webkit-transform: translate3d(140px, -95px, 0);
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#no-js-g ul li:target a img {
opacity: 1;
-webkit-transform: scale(1);
-webkit-transform-origin: top left;
}
#no-js-g ul li:first-child:target a {
-webkit-animation: out-first 0.5s both alternate ease;
-webkit-transform: translate3d(140px, 0, 0);
}
#no-js-g ul > li:nth-child(4):target a {
-webkit-animation: out-last 0.5s both alternate ease;
-webkit-transform: translate3d(140px, -200px, 0);
}
<div id="no-js-g">
<ul>
<li id="one"><a href="#one"><img src="http://placehold.it/400x300/666666/ffffff"></a></li>
<li id="two"><a href="#two"><img src="http://placehold.it/400x300/f8a000/ffffff"></a></li>
<li id="three"><a href="#three"><img src="http://placehold.it/400x300/3B9EBB/ffffff"></a></li>
<li id="four"><a href="#four"><img src="http://placehold.it/400x300/D77874/ffffff"></li>
</ul>
</div>​
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment