Skip to content

Instantly share code, notes, and snippets.

@secondfret

secondfret/dabblet.css

Created April 23, 2012 17:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save secondfret/2472464 to your computer and use it in GitHub Desktop.
Save secondfret/2472464 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Circle Gallery: Step Five
Raw
dabblet.css
/**
* Animated Circle Gallery: Step Five */
* {margin: 0; padding: 0;}
body {
background: #222;
}
/*GALLERY*/
.gallery {
width: 1000px;
margin: 50px auto;
}
ul {
list-style: none;
}
.gallery li {
height: 200px;
width: 200px;
margin: 25px;
float: left;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.gallery li img {
margin-top: -70px;
-webkit-transition: margin 1.5s ease;
-moz-transition: margin 1.5s ease;
-o-transition: margin 1.5s ease;
-ms-transition: margin 1.5s ease;
transition: margin 1.5s ease;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="gallery">
<ul>
<li><p>One</p><img src="http://lorempixum.com/400/400/sports/1" /></li>
<li><p>Two</p><img src="http://lorempixum.com/400/400/sports/2" /></li>
<li><p>Three</p><img src="http://lorempixum.com/400/400/sports/3" /></li>
<li><p>Four</p><img src="http://lorempixum.com/400/400/sports/4" /></li>
<li><p>Five</p><img src="http://lorempixum.com/400/400/sports/5" /></li>
<li><p>Six</p><img src="http://lorempixum.com/400/400/sports/6" /></li>
<li><p>Seven</p><img src="http://lorempixum.com/400/400/sports/7" /></li>
<li><p>Eight</p><img src="http://lorempixum.com/400/400/sports/8" /></li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment