<div class="container">
<div class="item id1">
<div class="img"></div>
<div class="info">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<a href="http://dribbble.com/shots/902906-Travel-Magazine?list=popular&offset=16">Source</a>
</div>
</div>
<div class="item id2">
<div class="img"></div>
<div class="info">
<p>Another thing for a thing!</p>
<a href="http://dribbble.com/shots/887990-Canada?list=popular&offset=8">Source</a>
</div>
</div>
<div class="item id3">
<div class="img"></div>
<div class="info">
<p>Here's a preview of something new I'm working on.
It's going to be a print thingy as well, and this is just one of the little parts of it. Hope I can share something more very soon with you.</p>
<a href="http://dribbble.com/shots/887232-WIP-Artwork?list=popular&offset=5">Source</a>
</div>
</div>
<div class="item id4">
<div class="img"></div>
<div class="info left">
<p>Another preview! Make sure to see the attachment to see the nice subtle textures. </p>
<a href="http://dribbble.com/shots/888253-New-IOS-App-design?list=popular&offset=8">Source</a>
</div>
</div>
<div class="item id5">
<div class="img"></div>
<div class="info left">
<p>I've seen a lot of home office workspaces but I rarely see real office workspace — here's mine.</p>
<p>MacBook Pro Retina
<br>27" Cinema Display
<br>Emma Watson
<br>iPad 3
<br>iPhone 4
<br>Sonos Speaker
<br>Herman Miller Aeron Chair</p>
<p>Where do you work & what do you work with?</p>
<a href="http://dribbble.com/shots/888324-6Wunderkinder-Workspace?list=popular&offset=13">Source</a>
</div>
</div>
<div class="item id6">
<div class="img"></div>
<div class="info left">
<p>Here's the whole card that @James T. Edmondson worked up for us for Valentine's Day this year. Thanks to Mama's Sauce for doing such an amazing job printing these.</p>
<a href="http://dribbble.com/shots/905472-Dyslexia-Sexia?list=popular&offset=10">Source</a>
</div>
</div>
<div class="item id7">
<div class="img"></div>
<div class="info left">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<a href="http://dribbble.com/shots/905943-iOS-Icons?list=popular&offset=4">Source</a>
</div>
</div>
</div>@import "compass/css3";
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
a {
color: #eee;
}
.id1 {
top:0;
left: 50px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/102849/screenshots/902906/travel_magazine.png') left top no-repeat;
}
}
.item.id1 {
width: 100px;
height: 100px;
}
.id2 {
top: 180px;
left: 200px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/2119/screenshots/887990/dribbble.jpg') left top no-repeat;
}
}
.item.id2 {
width: 200px;
height: 200px;
}
.id3 {
top: 500px;
left: 100px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/13897/screenshots/887232/art.jpg') left top no-repeat;
}
}
.item.id3 {
width: 150px;
height: 150px;
}
.id4 {
top: 20px;
left: 700px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/2559/screenshots/888253/screen_shot_2013-01-09_at_11.55.24_pm.png') left top no-repeat;
}
}
.item.id4 {
width: 150px;
height: 150px;
}
.id5 {
top: 470px;
left: 600px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/19894/screenshots/888324/untitled-2.jpg') left top no-repeat;
}
}
.item.id5 {
width: 110px;
height: 110px;
}
.id6 {
top: 50px;
left: 400px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/10881/screenshots/905472/dyslexia_drib_2.jpg') left top no-repeat;
}
}
.item.id6 {
width: 130px;
height: 130px;
}
.id7 {
top: 250px;
left: 550px;
.img {
background: url('https://dribbble.s3.amazonaws.com/users/75656/screenshots/905943/ios-icons.png') left top no-repeat;
}
}
.item.id7 {
width: 120px;
height: 120px;
}
.id1, .id2, .id3, .id4, .id5, .id6, .id7 {
width: 400px;
height: 300px;
}
.item.id1:hover, .item.id2:hover, .item.id3:hover, .item.id4:hover, .item.id5:hover, .item.id6:hover, .item.id7:hover {
width: 400px;
height: 300px;
}
.item {
position: absolute;
width: 100px;
height: 100px;
/*overflow: hidden;*/
.img {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
border: 1px solid #eee;
background-size: 150%;
background-position: 50% 10%;
transform: rotate(10deg);
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-o-transform: rotate(10deg); /* Opera */
-moz-transform: rotate(10deg); /* Firefox */
-webkit-transition: all 500ms ease-in-out; /** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out; /** Firefox **/
-o-transition: all 500ms ease-in-out; /** Opera **/
-ms-transition: all 500ms ease-in-out; /** IE **/
transition: all 500ms ease-in-out;
}
/*
linear: the transition will have constant speed from start to end.
ease: the transition will start slowly, then get faster, before ending slowly.
ease-in: the transition will start slowly.
ease-out: the transition will end slowly.
ease-in-out: the transition starts and ends slowly.
cubic-bezier: define specific values for your own transition.
*/
-webkit-transition: all 500ms ease-in-out; /** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out; /** Firefox **/
-o-transition: all 500ms ease-in-out; /** Opera **/
-ms-transition: all 500ms ease-in-out; /** IE **/
transition: all 500ms ease-in-out;
z-index: 10;
}
.item:hover .img {
background-size: 100%;
background-position: 100% 100%;
transform: rotate(0);
-ms-transform: rotate(0); /* IE 9 */
-webkit-transform: rotate(0); /* Safari and Chrome */
-o-transform: rotate(0); /* Opera */
-moz-transform: rotate(0); /* Firefox */
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
position: absolute;
z-index: 100;
}
.item:hover {
z-index: 100;
}
.item .info {
width: 300px;
padding: 20px;
background: rgba(0,0,0,.7);
color: #eee;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 12px;
/*display: none; */
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
-moz-transform: rotate(90deg); /* Firefox */
position: absolute;
top: 0;
right: -340px;
z-index: 1;
opacity: 0;
-webkit-transition: all 500ms ease-in-out; /** Chrome & Safari **/
-moz-transition: all 500ms ease-in-out; /** Firefox **/
-o-transition: all 500ms ease-in-out; /** Opera **/
-ms-transition: all 500ms ease-in-out; /** IE **/
transition: all 500ms ease-in-out;
}
.item .info.left {
top: 0;
left: -340px;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-o-transform: rotate(-90deg); /* Opera */
-moz-transform: rotate(-90deg); /* Firefox */
}
.item:hover .info {
display: block;
transform: rotate(0);
-ms-transform: rotate(0); /* IE 9 */
-webkit-transform: rotate(0); /* Safari and Chrome */
-o-transform: rotate(0); /* Opera */
-moz-transform: rotate(0); /* Firefox */
opacity: 1;
position: absolute;
z-index: 1;
transition-delay: 500ms;
-moz-transition-delay: 500ms; /* Firefox 4 */
-webkit-transition-delay: 500ms; /* Safari and Chrome */
-o-transition-delay: 500ms; /* Opera */
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.