Trouble using background-position with hover

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/