Skip to content

Instantly share code, notes, and snippets.

@alienresident

alienresident/jsbin.faset.css

Created April 29, 2014 14:57
Show Gist options
  • Save alienresident/11402822 to your computer and use it in GitHub Desktop.
Save alienresident/11402822 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.faset.css
body {
margin: 10px;
background-color: darkgray;
}
h1 {
text-align: center;
}
.shelf-wrapper {
margin: 30px auto;
width: 702px;
}
h2.category {
margin: 0 6px;
font-family: sans-serif;
}
.shelf {
/* Positioning */
margin: 0;
padding: 0;
height: 140px;
width: 702px;
overflow: hidden;
/* Purdy */
background-color: white;
border-radius: 5px;
border: 1px solid #888;
}
.shelf-item {
overflow: hidden;
display: inline-block;
width: 100px;
height: 120px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid darkgray;
background-size: 100%;
cursor: pointer;
position: relative;
}
#shelf-item-0 {
background-image: url('../img/flower-0.jpeg'); /*http://www.flickr.com/photos/61926883@N00/484691677/*/
}
#shelf-item-1 {
background-image: url('../img/flower-1.jpeg'); /*http://www.flickr.com/photos/53231916@N03/7943817814/*/
}
#shelf-item-2 {
background-image: url('../img/flower-2.jpeg'); /*http://www.flickr.com/photos/79977734@N00/4780011328/*/
}
#shelf-item-3 {
background-image: url('../img/flower-3.jpeg'); /*http://www.flickr.com/photos/53231916@N03/7844697578/*/
}
#shelf-item-4 {
background-image: url('../img/flower-4.jpeg'); /*http://www.flickr.com/photos/shine2002/3928026019/*/
}
#shelf-item-5 {
background-image: url('../img/flower-5.jpeg'); /*http://www.flickr.com/photos/manumilou/6016656690/*/
}
.meta {
position: absolute;
bottom: 0; left: 0; right: 0; height: 18px;
padding-top: 4px;
font-size: 12px;
text-align: center;
color: white;
font-family: sans-serif;
background-color: rgba(0, 100, 0, 0.7);
cursor: pointer;
}
.meta.sold-out {
background-color: rgba(80, 0, 0, 0.7);
}
#footer {
font-size: 12px;
position: fixed;
bottom: 0; right: 0;
margin: 8px;
cursor: default;
}
.poster-anim-start {
top: -180px;
}
#shelf-item-0.poster-anim-start {
left: 200px;
}
#shelf-item-1.poster-anim-start {
left: 100px;
}
#shelf-item-2.poster-anim-start {
left: 0px;
}
#shelf-item-3.poster-anim-start {
left: -100px;
}
#shelf-item-4.poster-anim-start {
left: -200px;
}
#shelf-item-5.poster-anim-start {
left: -300px;
}
.meta-anim-start {
bottom: -22px;
}
Raw
jsbin.faset.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="jQuery Lesson 2" />
<meta charset="UTF-8">
<title>jQuery :: Lesson 2 Product Shelf</title>
<!-- Tip: Start src & href links with no slash for relative paths. -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".shelf > .shelf-item").addClass('poster-anim-start').animate({ top: 0, left: 0 }, 700, 'easeOutBack');
$(".shelf > .shelf-item > .meta").addClass('meta-anim-start');
$('ul.shelf > li').hover(
function() { $(this).children('.meta').stop().animate({ bottom: 0 }, 250) },
function() { $(this).children('.meta').stop().animate({ bottom: -22 }, 100) }
)
});
</script>
</head>
<body>
<h1>The Poster Store</h1>
<div class="shelf-wrapper">
<h2 class="category">Flowers</h2>
<ul class="shelf" id="shelf-flowers">
<li class="shelf-item" id="shelf-item-0">
<div class="meta">In Stock - $14.95</div>
</li>
<li class="shelf-item" id="shelf-item-1">
<div class="meta">In Stock - $12.95</div>
</li>
<li class="shelf-item" id="shelf-item-2">
<div class="meta sold-out">Sold Out - $8.95</div>
</li>
<li class="shelf-item" id="shelf-item-3">
<div class="meta">In Stock - $18.95</div>
</li>
<li class="shelf-item" id="shelf-item-4">
<div class="meta">In Stock - $4.50</div>
</li>
<li class="shelf-item" id="shelf-item-5">
<div class="meta">In Stock - $12.95</div>
</li>
</ul>
</div>
<div id="footer">&copy;2013 Gymnasium Posters Inc.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment