Skip to content

Instantly share code, notes, and snippets.

@daneden
Created October 10, 2012 09:26
Show Gist options
  • Save daneden/3864343 to your computer and use it in GitHub Desktop.
Save daneden/3864343 to your computer and use it in GitHub Desktop.
CSS Photo Album
/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */
* {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
img {
display: block;
}
html, body {
min-height: 100%;
}
html {
font: 100%/1.5 Proxima Nova, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #fff;
background: #368 url(http://farm8.staticflickr.com/7053/6946650474_12f212c422_z.jpg) center no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
}
.album {
position: absolute;
left: 0;
right: 0;
width: 250px;
margin: auto;
top: 160px;
text-align: center;
}
.frame {
padding: 10px;
line-height: .7;
border-radius: .25em;
background-color: rgba(255,255,255,.7);
width: 180px;
margin: 0 auto;
box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
inset 0 0 0 1px rgba(255,255,255,.2),
0 1px 2px rgba(0,0,0,.3),
0 7px 7px -3px rgba(0,0,0,.5);
cursor: pointer;
}
.frame:before, .frame:after {
content:'';
padding: 10px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,.5);
box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
inset 0 0 0 1px rgba(255,255,255,.2),
0 1px 2px rgba(0,0,0,.3);
border-radius: .25em;
transform: rotate(-5deg);
}
.frame:after {
transform: rotate(5deg);
}
.frame i {
position: absolute;
z-index: 1;
display: block;
}
.frame i:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: .25em;
background-image: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 50%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 2px 1px rgba(255,255,255,.3);
-webkit-mask-image: -webkit-linear-gradient(#000, transparent)
}
.frame i img {
border-radius: .25em;
transition: .2s;
transform-origin: top left;
background-color: #123;
}
.album:hover .frame i img {
transform: scale(.5);
}
.frame > img {
display: inline-block;
margin-right: -.15em;
margin-left: -.15em;
}
.frame > img:nth-of-type(1) { border-radius: .25em 0 0 0; }
.frame > img:nth-of-type(2) { border-radius: 0 .25em 0 0; }
.frame > img:nth-of-type(3) { border-radius: 0 0 0 .25em; }
.frame > img:nth-of-type(4) { border-radius: 0 0 .25em 0; }
.count {
font-size: .875em;
font-weight: 700;
background-color: #ec621f;
padding: .5em .8em .4em;
border-radius: .25em;
position: absolute;
top: 80px;
width: 50%;
margin-left: 20%;
text-align: right;
z-index: -1;
transition: .3s;
}
.album:hover .count {
width: 80%;
}
.name {
font-weight: 700;
display: inline-block;
margin: 1em auto;
padding: .25em 1em;
background-color: rgba(0,0,0,.6);
border-radius: 3em;
transition: .1s;
transform: scale(.8) translateY(-5px);
opacity: 0;
cursor: pointer;
}
.album:hover .name {
transform: none;
opacity: 1;
}
.name:hover {
box-shadow: 0 0 0 3px #f6d761;
}
<div class="album">
<figure class="frame">
<i><img src="http://placedog.com/320/320" width="160" height="160"></i>
<img class="thumb" src="http://placedog.com/170/170" width="80" height="80">
<img class="thumb" src="http://placedog.com/180/180" width="80" height="80">
<img class="thumb" src="http://placedog.com/190/190" width="80" height="80">
<img class="thumb" src="http://placedog.com/200/200" width="80" height="80">
</figure>
<span class="count">18</span>
<figcaption class="name">Dogs</figcaption>
</div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment