Trouble using background-position with hover - css

Question

I'm trying to recreate the 'bounce' that tumblr adds to their new post icons on the dashboard.
I've been looking around for how to use background-position to create that bounce but haven't had any luck so far.
The other questions here have had a problem using background and then trying to specify the background-position but I'm not using background at all.
I wasn't trying to spend a ton of time on this but now I am curious about it.
Gist for the code
Codepen
HTML
<div id="container">
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
</div>
CSS
#container {
width:80%;
height: 200px;
padding-left:5em;
background-color: #95A5A6;
}
.block {
margin: 2em;
height: 130px;
width: 130px;
float:left;
border-radius:10px;
}
.block:hover > .inblock{
background-color:#E74C3C;
background-position: top;
}
.inblock {
height: 80px;
width: 80px;
background-color:blue;
margin: 1.5em;
}
.light-blue {
background-color:#2980B9
}
.blue {
background-color:#2C3E50;
}
.green {
background-color:#27AE60;
}
.yellow {
background-color:#F1C40F;
}
.orange {
background-color:#E67E22;
}
.light-green {
background-color:#2ECC71;
}

Answer 1

From the documentation:
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
If you look at the HTML (using a developer tool, such as Google Chrome's developer tools), you'll see that Tumblr actually use a sprite and then use the background-position property to shift the icons up/down using CSS3 transitions.
The background-position property isn't doing anything in the code you provided since there has been no background-image property set.
If you don't want to use a sprite/image, you can simply use CSS3's transform property instead to create the 'bounce' effect. I have created a JSFiddle demonstrating the idea: http://jsfiddle.net/7rsbr/