"card"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: