<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pmburov/pen/xCjJL?depth=everything&order=popularity&page=6&q=thumbnail&show_forks=false" />
<style class="cp-pen-styles">.container {
width: 960px;
margin: 0 auto;
position: relative;
}
a {
color: #eee;
}
.id1 {
top: 0;
left: 50px;
}
.id1 .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;
}
.id2 .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;
}
.id3 .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;
}
.id4 .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;
}
.id5 .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;
}
.id6 .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;
}
.id7 .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;*/
/*
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 .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;
}
.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, 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 */
}
</style></head><body>
<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="https://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="https://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="https://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="https://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="https://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="https://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="https://dribbble.com/shots/905943-iOS-Icons?list=popular&offset=4">Source</a>
</div>
</div>
</div>
</body></html>
